[英]Change dataset on mousedown in d3
我已经从一个数据集中创建了一个条形图。 我还创建了一个我想充当按钮的圆形对象。 在圆上单击鼠标时,我想更改用于条形图的数据集,然后重新绘制图形。 我尝试将mousedown处理程序添加为一个函数,但是单击时数据集不会更改。 这是矩形的原始selectAll:
svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (width / data.length);})
.attr("y", function(d) {
return 100 - d ;})
.attr("width", function(d,i) {
return barWidth ;})
.attr("height", function(d) {
return 150 - (100 - d);
});
这是我在下面绘制的圆(我想成为一个切换按钮):
svg.append("circle")
.attr("cx", 525)
.attr("cy", 275)
.attr("r", 45)
.attr("stroke", "white")
.attr("fill", "#660066")
.attr("opacity", "0.7")
.on("mouseover", function(){d3.select(this)
.style("opacity", "1");
})
.on("mouseout", function(){d3.select(this)
.style("opacity", "0.7");
})
.on("mousedown", function() {
// handle event here
});
我尝试将svg.selectAll(“ rect”)直接复制到mousedown函数中,然后将数据重新绑定到其他预定义的数据集。 我也尝试过重新定义.on“ mousedown”函数中的数据集,但条形图仍然不会重绘。 将mousedown拆分为一个我在svg.append(“ circle”)之外调用的单独函数也不起作用。 我的猜测是问题是我试图通过处理另一个事件来更改一个绘制对象,但是我觉得必须有某种方法可以解决此问题。 任何意见是极大的赞赏。
如果您显示确切的问题或jsfiddle
工作,我可能会尝试查找问题
结构和流程必须是这样的
两个SVG circle
和bar graph
两种功能
function drawgraph(var dataset)
{
//draw graph with this dataset
}
function drawcircle()
{
//using `d3.js` draw circle
// and in .mousedown call the drawgraph(dataset)
}
方法很简单
分开 svg和代码也不要将两者结合在一起 。
该代码必须与此类似。
var rects = svg.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * (width / data.length);})
.attr("y", function(d) {
return 100 - d ;})
.attr("width", function(d,i) {
return barWidth ;})
.attr("height", function(d) {
return 150 - (100 - d);
});
svg.append("circle")
.attr("cx", 525)
.attr("cy", 275)
.attr("r", 45)
.attr("stroke", "white")
.attr("fill", "#660066")
.attr("opacity", "0.7")
.on("mouseover", function(){d3.select(this)
.style("opacity", "1");
})
.on("mouseout", function(){d3.select(this)
.style("opacity", "0.7");
})
.on("click", function() {
rects.data(newdata)
.enter()
.attr("x", function(d, i) {
return i * (width / data.length);})
.attr("y", function(d) {
return 100 - d ;})
.attr("width", function(d,i) {
return barWidth ;})
.attr("height", function(d) {
return 150 - (100 - d);
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.