我已经从一个数据集创建了一个条形图。我还创建了一个圆形对象,我想表现为按钮。在圆圈中的mousedown,我想更改用于条形图的数据集,然后重绘图形。我尝试将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”)之外调用的单独函数也不起作用。我的猜测是问题是我试图通过处理另一个事件来改变一个绘图对象,但我觉得必须有一些方法来解决这个问题。非常感谢任何建议。
答案 0 :(得分:0)
如果您显示确切的问题或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以及代码不合并两者..
答案 1 :(得分:0)
代码必须与此类似。
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);
});
});