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

回答

相关问题