d3.js实现直方图当鼠标点击相应的位置,相应位置颜色就会发生变化
时间: 2024-02-23 18:58:40 浏览: 19
可以通过在鼠标点击事件回调函数中获取当前点击位置的数据,然后修改该数据对应的直方图颜色来实现这个功能。
以下是一个简单的示例代码:
```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]);
var rects = 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 mouseX = d3.mouse(this)[0];
var mouseY = d3.mouse(this)[1];
var dataX = Math.floor((mouseX - 50) / 40);
var dataY = Math.floor((250 - mouseY) / xScale(1));
var clickedData = bins[dataX][dataY];
// 生成新颜色
var newColor = d3.schemeCategory10[Math.floor(Math.random() * 10)];
// 更新点击位置的直方图颜色
rects.filter(function(d) { return d.includes(clickedData); })
.transition()
.duration(1000)
.attr("fill", newColor);
});
```
在上面的代码中,我们创建了一个包含5个数据点的直方图,并在SVG元素中绘制出来。然后,我们设置了一个鼠标点击事件的监听器,在回调函数中获取了当前鼠标位置的数据,并用该数据更新了对应的直方图颜色。
当你点击SVG元素时,该位置对应的直方图颜色会随机变化。你可以根据自己的需求修改代码,以实现更复杂的交互效果。