如何使某些元素在点击时突出显示
How do you make certain elements highlight when clicked?
我正在构建一个图形,它显示了各种条形图,每个条形图都有自己的特定数据。这些条形图是用颜色编码的,并有一个图例来说明颜色的含义。我想做的是,当你点击图例上的一个圆圈时,图形上相应颜色的条形图会突出显示。
<!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]
})
如果颜色是由data设置的(这是最好的方法…),那就只需要设置一个类并通过这个类突出显示它们。
但是有一种方法可以选择与被点击的圆圈颜色相同的所有栏:我们可以选择所有栏,然后通过属性过滤选择:
.on("click", function(){
var rects = d3.selectAll("rect").filter(function(){
return this.attributes.fill.nodeValue == "#1F45FC";
});
});
这里是小提琴:https://jsfiddle.net/gerardofurtado/z3y0fk74/(我没有使用SO片段,因为条太长)
点击圆圈,相同颜色的条将有一个黑色描边(宽度2)。再次点击它,描边被删除。
相关文章:
- 高亮显示与数组字符串一起使用时文本插件中断
- 如何使在文本字段中输入的值显示在HTML语句中
- 使自动完成可搜索下拉菜单don'我不想在点击搜索时显示列表
- 如何使活动菜单项具有突出显示样式
- 如何使角度显示为空<p>标签
- CSS Html使图像显示在单选按钮的选项上(单选按钮被CSS隐藏)
- 使 ajax 请求和成功数据显示在 id <选择>选择>部分中
- 使javascript按钮隐藏或显示内容切换
- 如何使角度仅显示可用的数据
- JS照片库.使大图像显示和缩略图可单击
- 使引导轮播导航仅在悬停时显示
- 我该如何使用 jQuery 使某物循环 12 次
- “未显示”元素使边距显示
- Angular ng显示如何使可见
- 基于字符串搜索的简单jquery查找和显示无法使其工作
- 未显示SVG使用用JavaScript创建的元素的原因
- 显示或使活动选项卡可见
- jQuery显示/隐藏-使其他元素有更流畅的过渡
- 我如何使某一行出现后,即使重新加载使用jquery
- 使用jQuery添加显示:none;当某件事是真实的,并且有一定的规模