D3 - 基於JSON數據附加SVG

在我附加的fiddle中，您會發現一個變量數據集，它是一個帶有嵌套數組的JSON對象，該數組包含三個不同的JSON對象。下面的代碼旨在爲每個這些對象在畫布上附加一個圓形元素。 x位置基於JSON中的字段，並且在點擊圓圈後，在控制檯中打印另一個字段（您會注意到此JSON數據是從Twitter API中提取的Tweets）。D3 - 基於JSON數據附加SVG

但是，只有一個圓形正在使用此代碼所示，當你運行它：

canvas.selectAll("circle") 
     .data(data) 
     .enter() 
     .append("circle") 
     .attr("class", "node") 
     .attr("cx", (d.Followers)/20) 
     .attr("cy", 200) 
     .attr("r", 30) 
     .attr("fill", "#42f459") 
     .attr("stroke", "black") 
     .attr("stroke-width", 2.5) 
     .on("mouseover", mouseOn) 
     .on("mouseout", mouseOff) 
     .on('mousedown.log', function (d) { 
     console.log(d.Tweet); 
     });

請問這個代碼需要改變，以顯示圈子中的所有數據，而不是僅僅一個圈？點擊它並查看打印內容似乎表明它只爲數據集中的最後一個JSON對象附加一個圓圈。

你可以給任何提示將不勝感激。我覺得這是由於對D3和上下文中data（）和enter（）實際上的含義缺乏瞭解，以及我對它的新意。首先十分感謝！

來源

2017-04-16 Raj Aiyer

嘗試這樣的：

data.forEach(function (d) { 
     d.Favourites = d.Favourites; 
     d.Default = d["Has Default Profile Image"]; 
     d.Followers = d["Number of followers"]; 
     d.Timestamp = d.Timestamp; 
     d.Tweet = d.Tweet; 
     d.Url = d["Tweet URL"] 
     d.Description = d["User Description"]; 
     d.Location = d["User Location"]; 
     d.Verified = d["User Verified"]; 
     d.Retweets = d.Retweets; 
     d.Username = d.Username; 
}); 

     canvas.selectAll("circle") 
      .data(data) 
      .enter() 
      .append("circle") 
      .attr("class", "node") 
      .attr("cx", function(d){return d.Followers/20}) 
      .attr("cy", 200) 
      .attr("r", 30) 
      .attr("fill", "#42f459") 
      .attr("stroke", "black") 
      .attr("stroke-width", 2.5) 
      .on("mouseover", mouseOn) 
      .on("mouseout", mouseOff) 
      .on('mousedown.log', function (d) { 
      console.log(d.Tweet); 
      }); 

      function mouseOn(d, i) { 
      d3.select(this).attr({ 
       fill: "#42f4ee" 
      }); 
      } 

      function mouseOff(d, i) { 
      d3.select(this).attr({ 
       fill: "#42f459" 
      }); 
      }

工作實例here。首先，您需要設置數據，一旦數據準備就緒，然後循環遍歷每個項目並繪製圓圈。

來源

2017-04-16 14:25:50 John

非常感謝你John！我感謝您的幫助。所以我現在得到你必須先設置數據。你是否必須爲此使用ForEach？如果你想一次顯示n個圓圈怎麼辦？當你第二次調用函數（d）時，它是否已經在那裏替換了數據？我想我對這個d代表什麼有點不確定。 –

本節基本上是for循環，輸入後的所有內容都是針對數組中的每個對象完成的。（d）傳遞當前對象的每個對象--------- 函數（d）傳入當前對象對象到一個函數，你可以用它來詢問對象並根據它的屬性返回值。 – John

我明白了，謝謝。最後一個問題（對不起）：所以我們假設我只想爲前n個JSON對象創建圓圈。這會涉及用以下方式替換ForEach塊嗎？ - for（var i = 0; i

D3 - 基於JSON數據附加SVG

回答

相關問題