d3.js实现直方图当鼠标点击就会发生变化
时间: 2024-02-23 12:58:30 浏览: 26
可以通过d3.js的事件监听器实现这个功能。首先,你需要设置一个鼠标点击事件的监听器,然后在事件回调函数中更新直方图的数据和样式。
以下是一个简单的示例代码:
```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 newData = [];
for (var i = 0; i < data.length; i++) {
newData.push(Math.floor(Math.random() * 50));
}
// 更新直方图
var newBins = histogram(newData);
xScale.domain([0, d3.max(newBins, function(d) { return d.length; })]);
svg.selectAll("rect")
.data(newBins)
.transition()
.duration(1000)
.attr("y", function(d) { return 250 - xScale(d.length); })
.attr("height", function(d) { return xScale(d.length); });
});
```
在上面的代码中,我们创建了一个包含5个数据点的直方图,并在SVG元素中绘制出来。然后,我们设置了一个鼠标点击事件的监听器,在回调函数中生成了新的数据,并用新的数据更新了直方图。
当你点击SVG元素时,直方图的高度会随机变化。你可以根据自己的需求修改代码,以实现更复杂的交互效果。