d3.js实现直方图当鼠标点击颜色发生变化
时间: 2024-02-23 18:58:35 浏览: 29
可以通过修改SVG元素的属性来改变直方图的颜色。类似于在上一个问题中,你需要设置一个鼠标点击事件的监听器,然后在事件回调函数中更新直方图的颜色。
以下是一个简单的示例代码:
```javascript
// 数据
var data = [10, 20, 30, 40, 50];
// 创建svg元素
var svg = d3.select("body")
.append("svg")
.attr("width", 500)
.attr("height", 300);
// 创建直方图
var histogram = d3.histogram()
.domain([0, 50])
.thresholds([0, 10, 20, 30, 40, 50])
.value(function(d) { return d; });
// 绘制直方图
var bins = histogram(data);
var xScale = d3.scaleLinear()
.domain([0, d3.max(bins, function(d) { return d.length; })])
.range([0, 400]);
svg.selectAll("rect")
.data(bins)
.enter()
.append("rect")
.attr("x", 50)
.attr("y", function(d) { return 250 - xScale(d.length); })
.attr("width", 40)
.attr("height", function(d) { return xScale(d.length); })
.attr("fill", "steelblue");
// 鼠标点击事件
svg.on("click", function() {
// 生成新颜色
var newColor = d3.schemeCategory10[Math.floor(Math.random() * 10)];
// 更新直方图颜色
svg.selectAll("rect")
.transition()
.duration(1000)
.attr("fill", newColor);
});
```
在上面的代码中,我们创建了一个包含5个数据点的直方图,并在SVG元素中绘制出来。然后,我们设置了一个鼠标点击事件的监听器,在回调函数中生成了新的颜色,并用新的颜色更新了直方图。
当你点击SVG元素时,直方图的颜色会随机变化。你可以根据自己的需求修改代码,以实现更复杂的交互效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)