Javascript D3-基于JSON数据追加SVG

在我的附件中，您将看到一个变量数据集，它是一个JSON对象，具有嵌套数组，包含三个不同的JSON对象。下面的代码旨在为这些对象中的每一个向画布添加一个圆圈元素。x位置基于JSON中的一个字段，单击圆圈后，在控制台中打印另一个字段（您会注意到这个JSON数据是从TwitterAPI中提取的Tweets）

但是，运行此代码时，仅显示一个圆圈：

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对象添加了一个圆圈

如果您能提供任何建议，我们将不胜感激。我觉得这是因为我不了解data（）和enter（）在D3的上下文中的实际含义，因为我是新手。非常感谢

试着这样做：

 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"
            });
          }

---

工作示例。首先，您需要设置数据，一旦数据准备就绪，然后循环遍历每个项目并绘制圆圈

非常感谢你，约翰！我感谢你的帮助。现在我明白了，你必须先设置数据。你必须使用ForEach吗？如果您想一次显示n个圆圈，该怎么办？当您第二次调用函数（d）时，是否会替换已有的数据？我想我有点不确定这个d代表什么。这个部分基本上是for循环，enter之后的所有操作都是为数组中的每个对象完成的。canvas.selectAll（“circle”）.data（data.enter（）-----为每个对象做点什么------函数（d）将当前对象传递给一个函数，您可以使用该函数查询对象并根据其属性返回值。我明白了，谢谢。最后一个问题（对不起）：假设我只想为前n个JSON对象创建圆。这是否涉及用以下内容替换ForEach块对于（var i=0；iYou需要在将数据数组传递给d3之前对其进行操作。创建一个新的数据数组，var dataSubset=data.slice（0，3）；。这将返回前3个对象。然后使用dataSubset，例如.data（dataSubset）。请参阅此处有关slice的更多信息。