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对象附加一个圆圈。

您可以提供的任何提示都将非常感激。我觉得这是因为缺乏对数据（）和输入（）在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。首先，您需要设置数据，一旦数据准备就绪，然后遍历每个项目并绘制圆圈。

D3 - 基于JSON数据附加SVG

1 个答案: