我对 d3 很陌生，我找到了这段代码来做一些我正在做的可视化。
我省略了大部分数据，以便更顺利地适应此页面。
基本上，我想做的是当你点击它时，条形的边缘只出现在所选变量上，现在，每当你选择一个变量时，就会显示其他变量的边缘，所以它看起来很可怕。很多帮助将不胜感激！ 谢谢！
<!DOCTYPE html>
<meta charset="utf-8">
<style>
text{
font-size:12px;
}
.mainBars rect{
shape-rendering: auto;
fill-opacity: 0;
stroke-width: 0.5px;
stroke: rgb(0, 0, 0);
stroke-opacity: 0;
}
.subBars{
shape-rendering:crispEdges;
}
.edges{
stroke:black;
stroke-width: .4px:
fill-opacity:0.5;
}
.header{
text-anchor:middle;
font-size:18px;
font-weight: bold;
line-height: 1.5;
}
line{
stroke:red;
}
</style>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="http://vizjs.org/viz.v1.1.0.min.js"></script>
<script>
var data=[['CA', 'Wheat', 2441900000.0, 2441900000.0],
['CO', 'Alfalfa', 4410000000.0, 4410000000.0],
['KS', 'Sorghum', 13300000000.0, 13300000000.0],
['TX', 'Sorghum', 12500000000.0, 12500000000.0],
['WY', 'Safflower', 5655522.245, 5655522.245]];
//Create array below, one color per state.
//There's probably a programmatic way to use a d3 color palette
//to just automatically do it instead of listing 51 colors individually.
//e.g. d3.scale.category10(), also
// http://stackoverflow.com/questions/20847161/how-can-i-generate-as-many-colors-as-i-want-using-d3
var color ={KS:"#3366CC", WY:"#DC3912", CA:"#FF9900", CO:"#109618", TX:"#990099", IA:"#0099C6"};
var svg = d3.select("body").append("svg").attr("width", 960).attr("height", 800);
svg.append("text").attr("x",250).attr("y",70)
.attr("class","header").text("Crop Acreage by State - 2015");
//svg.append("text").attr("x",750).attr("y",70)
// .attr("class","header").text("Duplicate");
var g =[svg.append("g").attr("transform","translate(150,100)")
,svg.append("g").attr("transform","translate(650,100)")];
var bp=[ viz.bP()
.data(data)
.min(12)
.pad(0.5)
.height(600)
.width(300)
.barSize(35)
.fill(d=>color[d.primary])
// ,viz.bP()
// .data(data)
// .value(d=>d[3])
// .min(12)
// .pad(1)
// .height(600)
// .width(200)
// .barSize(35)
// .fill(d=>color[d.primary])
];
[0,1].forEach(function(i){
g[i].call(bp[i])
g[i].append("text").attr("x",-50).attr("y",-8).style("text-anchor","middle").text("State");
g[i].append("text").attr("x", 250).attr("y",-8).style("text-anchor","middle").text("Crop");
g[i].append("line").attr("x1",-100).attr("x2",0);
g[i].append("line").attr("x1",200).attr("x2",300);
g[i].append("line").attr("y1",700).attr("y2",700).attr("x1",-100).attr("x2",0);
g[i].append("line").attr("y1",610).attr("y2",610).attr("x1",200).attr("x2",300);
g[i].selectAll(".mainBars")
.on("mouseover",mouseover)
.on("mouseout",mouseout);
g[i].selectAll(".mainBars").append("text").attr("class","label")
.attr("x",d=>(d.part=="primary"? -30: 30))
.attr("y",d=>+6)
.text(d=>d.key)
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
g[i].selectAll(".mainBars").append("text").attr("class","perc")
.attr("x",d=>(d.part=="primary"? -100: 100))
.attr("y",d=>+6)
.text(function(d){ return d3.format("0.0%")(d.percent)})
.attr("text-anchor",d=>(d.part=="primary"? "end": "start"));
});
function mouseover(d){
[0,1].forEach(function(i){
bp[i].mouseover(d);
g[i].selectAll(".mainBars").select(".perc")
.text(function(d){ return d3.format("0.0%")(d.percent)});
});
}
function mouseout(d){
[0,1].forEach(function(i){
bp[i].mouseout(d);
g[i].selectAll(".mainBars").select(".perc")
.text(function(d){ return d3.format("0.0%")(d.percent)});
});
}
d3.select(self.frameElement).style("height", "800px");
</script>
</body>
</html>
删除.edges样式
.edges{
stroke:black;
stroke-width: .4px;
fill-opacity:0.5;
}
可视化项为fill-opacity而不是opacity进行动画处理