Javascript 更新气泡图中的数据时如何在svg中保持圆圈
我试图在气泡图中添加交互,并在单击相应按钮时更新数据。但是当我点击按钮时,出现了一些问题,圆圈超出了svg的范围。我想不出怎么修理它。请帮忙 这是工作流程。(试试20062007或2008)Javascript 更新气泡图中的数据时如何在svg中保持圆圈,javascript,svg,d3.js,circle-pack,Javascript,Svg,D3.js,Circle Pack,我试图在气泡图中添加交互,并在单击相应按钮时更新数据。但是当我点击按钮时,出现了一些问题,圆圈超出了svg的范围。我想不出怎么修理它。请帮忙 这是工作流程。(试试20062007或2008) 非常感谢 更新功能存在一些问题,举几个大问题: 您正在选择的元素(var node=svg2.selectAll(“圆圈”))与您正在“输入”的元素不匹配(var nodenter=node.enter().append(“g”))。这导致在定义关键函数和执行数据联接时出现问题 在转换现有元素(node.
非常感谢 更新功能存在一些问题,举几个大问题:
- 您正在选择的元素(
)与您正在“输入”的元素不匹配(var node=svg2.selectAll(“圆圈”)
)。这导致在定义关键函数和执行数据联接时出现问题var nodenter=node.enter().append(“g”)
- 在转换现有元素(
时,您似乎试图重新绑定数据。这将导致问题——数据已经绑定到这些元素,此时不需要重新绑定node.select(“circle”).data(pack.nodes,function(d){return d.city})
我已经在这里更新了您的代码:您在Plunker上的代码似乎没有反映您在上面粘贴的代码(它没有按钮交互),您可以这样更新吗?很抱歉回复太晚!这是我第一次使用堆栈溢出,我想我会收到一封电子邮件,每当收到回复。我更新了Plunk。你能再检查一下吗?非常感谢!我现在设法使圆圈保持在原位,但旧的圆圈不退出。你能帮我看看bubble.js吗?哇!这真的很有帮助!非常感谢您指出问题并更新我的代码!我非常感谢你的帮助!作为一名d3初学者,我有时对自学所有东西和调试代码感到非常沮丧。谢谢你在这里为我们服务!
function changebubble(i) {
d3.csv("count_s.csv", function(csvData) {
pack.value(function(d){var valuedata=[d.count2006, d.count2007, d.count2008];
return valuedata[i];});
var data = { name: "city", children: csvData };
var node = svg.data([data]).selectAll("circle")
.data(pack.nodes);
var nodeEnter=node.enter().append("g")
.attr("class", "node").attr("cx",0).attr("cy",0)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
nodeEnter.append("title")
.text(function(d) { return d.city+ " : " +format(d.value); });
nodeEnter.append("circle")
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.city); });
nodeEnter.append("text")
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.city });
node.select("circle")
.transition().duration(1000)
.attr("r", function(d) { return d.r; })
.style("fill", function(d) { return color(d.city); });
node.transition().attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
node.select("text")
.transition().duration(1000)
.attr("dy", ".3em")
.style("text-anchor", "middle")
.text(function(d) { return d.city });
node.select("title")
.transition().duration(1000)
.text(function(d) { return d.city+ " : " +format(d.value); });
node.exit().remove();
});
}
function updateBubble1() {changebubble(0);}
function updateBubble2() {changebubble(1);}
function updateBubble3() {changebubble(2);}
d3.select("#count2006").on("click",updateBubble1);
d3.select("#count2007").on("click",updateBubble2);
d3.select("#count2008").on("click",updateBubble3);