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數據值

回答

相關問題