我正在构建一个图表，显示各种条形图，每个条形图都有自己的特定数据。条形图采用颜色编码，并有一个说明颜色含义的图例。我正在尝试做的是当您单击图例上的圆圈之一时，图表上具有相应颜色的条会突出显示。
<!DOCTYPE html>
<html>
<head>
<meta>
<meta name="description" content="Bar Graph Showing the Amount of Resources Being Used per Project " />
<meta charset="utf-8">
<title>Resources per Program</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style type="text/css">
h1 {
font-size: 35px;
color: darkblue;
font-family: Helvetica;
border-bottom-width: 3px;
border-bottom-style: dashed;
border-bottom-color: black;
}
h2 {
font-size: 20px;
color: darkred;
font-family: Helvetica;
margin-left: 900px;
margin-top: -40px;
margin-bottom: 70px
}
h3 {
font-size: 13px;
color: red;
font-weight: bold;
}
.label {
font-size: 20px;
color: darkgrey;
font-family: sans-serif;
border-bottom-width: 3px;
border-bottom-style: dashed;
border-bottom-color: black;
}
body {
background: linear-gradient(white, #a6a6a6);
}
.legend {
font-family: sans-serif;
font-size: 17px;
font-weight: normal;
}
</style>
</head>
<body>
<h1>Resources used per Program</h1>
<p>Choose Month:
<select id="label-option">
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
</select>
</p>
<h3>*Hold down the Selector and Drag onto Desired Option* (Touch Screen Users)</h3>
<script type="text/javascript">
var width = 1700
var height = 500
var emptyVar = 0
var dataArrayProjects = ['2G', 'AB', 'BC', 'CD', 'DE', 'EF', 'FG', 'GH']
var April = [2.5, 2.1, 1.3, 15.2, 1, 4, 1, 4]
var May = [2.5, 2.1, 1, 14.8, 1, 4, 2, 6]
var June = [2.5, 2.1, 1, 14.8, 1, 4, 2, 6]
var July = [2.5, 3.4, 2, 14.8, 1, 3.5, 2.5, 6]
var August = [2.5, 3.4, 2.5, 14.8, 1.2, 3.5, 2.15, 6]
var September = [2.5, 3, 2, 13.5, 1, 3.5, 2.5, 6]
d3.select("#label-option").on("change", change)
function change() {
var data = April;
if (this.selectedIndex == 1){
data = May;
} else if (this.selectedIndex == 2){
data = June;
} else if (this.selectedIndex == 3){
data = July;
} else if (this.selectedIndex == 4){
data = August;
} else if (this.selectedIndex == 5){
data = September;
}
canvas.selectAll("rect")
.data(data)
.attr("width", emptyVar)
.attr("height", 50)
.attr("fill", function(d, i) {
return color[i%8]
})
.attr("y", function(d, i) {
return i * 55
})
bars.transition()
.duration(1500)
.delay(200)
.attr("width", function(d) {
return widthScale(d);
});
texts = canvas.selectAll(".label")
.data(data)
.attr("x", function(d) {
return widthScale(d) + 10;
})
.attr("fill", function(d, i) {
return color[i%8]
})
.attr("y", function(d, i) {
return (i * 55) + 25
})
.style("opacity", 0)
.text(function(d, i) {
return d;
})
texts.transition()
.duration(1800)
.delay(180)
.style("opacity", 1)
}
var widthScale = d3.scale.linear()
.domain([0, 16])
.range([0, width - 60]);
var heightScale = d3.scale.ordinal()
.domain(dataArrayProjects)
.rangePoints([10, height - 85]);
var color = ["#1F45FC", "#87AFC7", "#87AFC7", "#151B54", "#1F45FC", "#151B54", "#1F45FC", "#151B54"]
var xAxis = d3.svg.axis()
.ticks("20")
.scale(widthScale);
var yAxis = d3.svg.axis()
.scale(heightScale)
.orient("left");
var canvas = d3.select("body")
.append("svg")
.attr("width", width + 250)
.attr("height", height)
.append("g")
.attr("transform", "translate(130, 0)");
var bars = canvas.selectAll("rect")
.data(April)
.enter()
.append("rect")
.attr("width", emptyVar)
.attr("height", 50)
.attr("fill", function(d, i) {
return color[i%8]
})
.attr("y", function(d, i) {
return i * 55
})
var texts = canvas.selectAll(".label")
.data(April)
.enter()
.append("text")
.attr("class", "label")
.attr("x", function(d) {
return widthScale(d) + 10;
})
.attr("fill", function(d, i) {
return color[i%8]
})
.attr("y", function(d, i) {
return (i * 55) + 25
})
.text(function(d, i) {
return d;
})
.style("opacity", 0)
canvas.append("g")
.attr("transform", "translate(0, 430)")
.attr("font-family", "Helvetica")
.attr("font-size", "15px")
.call(xAxis);
canvas.append("g")
.attr("font-family", "Helvetica")
.attr("font-size", "15px")
.style("fill", "black")
.attr("class", "y axis")
.call(yAxis);
bars.transition()
.duration(1500)
.delay(200)
.attr("width", function(d) {
return widthScale(d);
})
texts.transition()
.duration(1800)
.delay(180)
.style("opacity", 1)
var yAxisLine = canvas.append("line")
.attr("x1", -3)
.attr("y1", 0)
.attr("x2", -3)
.attr("y2", 436)
.attr("stroke-width", 6)
.attr("stroke", "black");
var legend = canvas.append("g")
.attr("class", "legend")
.attr("width", 450)
.attr("height", 300)
.attr("x", 1000)
.attr("y", 0)
legend.append("text")
.text("All Projects")
.attr("fill", "black")
.attr("stroke-width", 1)
.attr("x", 1300)
.attr("y", 20)
legend.append("text")
.text("All Core Capabilities")
.attr("fill", "black")
.attr("stroke-width", 1)
.attr("x", 1300)
.attr("y", 50)
legend.append("text")
.text("Projects and Core Capabilities")
.attr("fill", "black")
.attr("stroke-width", 1)
.attr("x", 1300)
.attr("y", 80)
legend.append("circle")
.attr("r", 8)
.attr("fill", "#1F45FC")
.attr("cx", 1275)
.attr("cy", 14.5)
legend.append("circle")
.attr("r", 8)
.attr("fill", "#87AFC7")
.attr("cx", 1275)
.attr("cy", 44.5)
legend.append("circle")
.attr("r", 8)
.attr("fill", "#151B54")
.attr("cx", 1275)
.attr("cy", 74.5)
</script>
<h2>Resources</h2>
</body>
</html>请原谅它的超高宽度，它适合我正在使用的大触摸屏。
我要问的是，当您单击图例中的一个圆圈时，我该如何做到这一点，所有与该圆圈颜色相同的条突出显示(如在笔划中而不是整个条)。
提前致谢!
最佳答案
选择相应的条形有点困难，因为您的条形图的颜色现在不依赖于任何数据，它们由索引分配:
.attr("fill", function(d, i) {
return color[i%8]
})
如果颜色是由数据设置的(这是最好的方法......)，那么只需设置一个类并按该类突出显示它们即可。
但是有一种方法可以选择所有与点击的圆圈颜色相同的条:我们可以选择所有的条，然后按属性过滤选择:
.on("click", function(){
var rects = d3.selectAll("rect").filter(function(){
return this.attributes.fill.nodeValue == "#1F45FC";
});
});
这是 fiddle :https://jsfiddle.net/gerardofurtado/z3y0fk74/ (我没有使用 SO 片段，因为条太长了)
点击圆圈，相同颜色的条形会有黑色描边(宽度为 2)。再次点击它，笔画被移除。
关于javascript - 单击时如何使某些元素突出显示？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38214667/