d3过渡圈到json数据值

我想在d3中设置强制定向布局并让我的节点以初始半径为0开始。然后我希望用户能够按下按钮并拥有节点的半径根据json数据值缩放到一个大小。当我尝试但要做到这一点，我得到一个JavaScript错误“无法读取属性未定义‘FIELD4’d3过渡圈到json数据值

这里是JSON数据：https://api.myjson.com/bins/2n7do

这里是代码：

// Update nodes. 
 
    
 
    circles = circles.data(data); 
 

 
    circles.exit().remove(); 
 

 
    var nodeEnter = circles.enter().append("g") 
 
     .attr("class", "node") 
 
     .style("fill", function(d) { return color(d.FIELD5); }) 
 
     .style("opacity", 0.75) 
 
     .call(force.drag); 
 

 
    nodeEnter.append("circle") 
 
     .attr("r", 9) 
 
     d3.select(circles).transition() 
 
     .delay(3000) 
 
     .duration(1000) 
 
     .attr("r", function(d) { return d.FIELD4 * 0.000195 });;

来源

2015-11-05 Jugal Patel

您不需要'd3.select（圆圈）'，只需要'nodeEnter.append（“circle”）。attr（“r”，9）.transition（）。delay（3000）。 duration（1000）.attr（“r”，function（d）{return d.FIELD4 * 0.000195}）;'。 –

我尝试了这种方法，并且出现了可视化效果，但不是过渡到新的大小，而是完全消失了所有节点。现在我得到这个JavaScript错误：“错误：属性r =”NaN“的无效值” –

您还需要将字符串转换为数字，所以'.attr（“r”，function（d）{ return + d.FIELD4 * 0.000195}）;'。 –

圈是D3的选择。通过这样做d3.select(circles)您选择的选择，我不认为这是有效的。而不是d3.select(circles).transition()尝试circles.transition()

来源

2015-11-05 22:36:34 sergeyz

我试过了，它没有改变任何东西。节点仍然以9半径尺寸出现，而不是过渡到数据值。下面是代码： nodeEnter.append（ “圆圈”） .attr（ “R”，9） circles.transition（） .delay（3000） .duration（1000） .attr（” r“，函数（d）{return data.FIELD4 * 0.000195}）;; –

尝试：var actual_circle = nodeEnter.append（“circle”）;然后actual_circle.transition（）。attr（“r”，function（d）{return（+ d.FIELD4）* 0.000195}）; – sergeyz

d3过渡圈到json数据值

回答

相关问题