d3 转换圈到 json 数据值答案

【问题标题】：d3 transition circles to a json data valued3 转换圈到 json 数据值
【发布时间】：2015-11-05 22:27:26
【问题描述】：

我正在尝试在 d3 中设置强制导向布局，并让我的节点以 0 的初始半径开始。然后我希望用户能够按下按钮并将节点的半径缩放到大小按照一个 json 数据值。但是，当我尝试这样做时，我收到一个 javascript 错误“无法读取未定义的属性 'FIELD4'。

这是 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 });;

【问题讨论】：

您不需要d3.select(circles)，只需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 });。

标签： javascript json d3.js force-layout

【解决方案1】：

circles 是 d3 选择。通过执行d3.select(circles)，您可以选择选择。我不认为这是有效的。而不是d3.select(circles).transition() 尝试circles.transition()

【讨论】：

我试过这个并没有改变任何东西。节点仍然以 9 大小的半径出现，而不是过渡到数据值。这是代码： nodeEnter.append("circle") .attr("r", 9) circles.transition() .delay(3000) .duration(1000) .attr("r", function(d) { return数据.FIELD4 * 0.000195 });;
尝试：var actual_circle = nodeEnter.append("circle");然后 actual_circle.transition().attr("r", function(d) { return (+d.FIELD4) * 0.000195 });