d3.js - D3.js:单击时更改条形颜色和另一种 svg 颜色
问题描述
我有一个条形图,我想:
1)点击时,选定的栏会改变颜色[我的代码有效]
2) 圆形 div 根据条形的高度更改颜色 [我似乎无法将其添加到上面的代码中]
我知道
.on('click', datum => { console.log(datum); })
会给我我想用来给条上色的条高度,我可以使用
.attr("fill", function (d) { return "rgb(0, 0, " + Math.round(d * 10) + ")"; })
根据条形高度更改圆圈的颜色,但我正在努力将所有这些代码花絮放在一起。
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "allbars")
.attr("x", function (d, i) {
return i * (w / dataset.length);
})
.attr("y", function (d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {
return d * 4;
})
.attr("fill", "#2296F3")
/* clicking on the bar gives us the data but how do I use this to change the circle color
.on('click', datum => {
console.log(datum);
/*
d3.selectAll('the_circle')
.attr("fill", function (d) {
console.log(d)
return "rgb(0, 0, " + Math.round(d * 10) + ")";
})
})
/* This code can be used to change the bar color on click */
.on("click", function (d) {
d3.selectAll('.allbars').style('fill', '#2296F3'); //fill all circles black
d3.select(this).style("fill", "#012B4E"); //then fill this circle lightcoral
}
)
// Add circle SVG, give it class circle_data that will be effected by on click
map_svg = d3.select("#the_circle").append("svg")
.attr("class", "svgWrapper")
map_svg.append("circle")
.attr("class", "performer_circle")
.attr("cx",100)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "black");
body {
font-size: 19px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
}
#title {
font-size: 20px;
padding-bottom: 10px;
padding-top: 20px;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Adding dynamic color, based on data</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
</head>
<body>
<div id="bars"></div>
<div id="the_circle"></div>
<div id="title">Clicking on a bar changes it's color, it also triggers the circle to change colors</div>
</body>
</html>
解决方案
我想这就是你想要实现的,我将把它留给你来管理配色方案,你必须管理的是来自 [0, 255] 的颜色。
只需将其添加到您附加到栏的点击事件中。
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;
var dataset = [5, 10, 13, 19, 21, 25, 22, 18, 15, 13, 11, 12, 15, 20, 18, 17, 16, 18, 23, 25];
//Create SVG element
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("class", "allbars")
.attr("x", function (d, i) {
return i * (w / dataset.length);
})
.attr("y", function (d) {
return h - (d * 4);
})
.attr("width", w / dataset.length - barPadding)
.attr("height", function (d) {
return d * 4;
})
.attr("fill", "#2296F3")
.on("click", function (d) {
d3.select("#the_circle circle")
.attr("fill", function () { return "rgb(0, 0, " + Math.round(d * 10) + ")"; });
d3.selectAll('.allbars').style('fill', '#2296F3');
d3.select(this).style("fill", "#012B4E");
}
)
// Add circle SVG, give it class circle_data that will be effected by on click
map_svg = d3.select("#the_circle").append("svg")
.attr("class", "svgWrapper")
map_svg.append("circle")
.attr("class", "performer_circle")
.attr("cx",100)
.attr("cy", 100)
.attr("r", 50)
.attr("fill", "black");
body {
font-size: 19px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
text-align: center;
}
#title {
font-size: 20px;
padding-bottom: 10px;
padding-top: 20px;
font-weight: 300;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3: Adding dynamic color, based on data</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.js"></script>
</head>
<body>
<div id="bars"></div>
<div id="the_circle"></div>
<div id="title">Clicking on a bar changes it's color, it also triggers the circle to change colors</div>
</body>
</html>
推荐阅读
- php - 在控制器中获取特定信息?
- ios - 未定义符号:_OBJC_CLASS_$_SKStoreReviewController 测试 Gamemaker Studio 2 项目时
- spring - “错误:无法找到或加载主类 ${start-class} spring boot
- python - 如何使用不同的var导入相同的文件
- amazon-dynamodb - 无法连接到本地 dynamodb 数据库
- amazon-web-services - Amazon Athena - 使用存储为字符串的数字查询列
- php - foreach 未执行 - 仅显示第一个变量输入
- sql-server - 通过 3 个参数在连接表中搜索的参数化存储过程条件连接
- android - 如果上一个页面已满,则创建第二个 pdf 页面
- react-native - 在常量文件中访问 Redux 存储