D3 - 基于 JSON 数据附加 SVG

Question

在我附加的fiddle 中，您将找到一个可变数据集，它是一个 JSON 对象，其中包含一个包含三个不同 JSON 对象的嵌套数组。下面的代码旨在为每个对象在画布上附加一个圆形元素。 x 位置基于 JSON 中的一个字段，单击圆圈后，会在控制台中打印另一个字段（您会注意到此 JSON 数据是从 Twitter API 中提取的推文）。

但是，当您运行此代码时，只会显示一个圆圈：

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 上下文中的实际含义的理解，因为我是新手。提前非常感谢！

Answer 1

试试这样：

 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。首先，您需要设置数据，一旦数据准备好，然后遍历每个项目并绘制圆圈。