javascript - 在 D3.js html 工具提示中显示数组值

Question

我正在尝试在 D3 工具提示上显示 json 文件中的一些数据。我可以显示几乎所有数据，只是无法显示数组的所有对象，它只显示数组的最后一个对象。

我编写了这个简单的示例，以便更轻松地向您展示正在发生的情况。我只是在工具提示中列出名称和依赖项。

我的工具提示

var myTollTip = d3.select(".container")
    .append("div")
    .attr("class", "mytooltip")
    .style("opacity", "0")
    .style("display", "none");

行为

node.append("circle")
    .attr("r", 8)
    .style("fill", function (d) {
    return color(d.name);
    })

    .on("dblclick", function(d){
        d3.select(this)
            .transition()
            .duration(500)
            .style("cursor", "pointer")
            .attr("width", 60)
            myTollTip
              .transition()  //Opacity transition when the tooltip appears
              .duration(500)
              .style("opacity", "1")                           
              .style("display", "table-cell")  //The tooltip appears
              .style("vertical-align", "top");
            i=0;
            while (i<2){
                myTollTip
                    .html("<p>Name: " + d.name + "</p><p>" + d.dependencies[i].url + "</p>");
                i++;
            } 
    })

json数据

    {
      "nodes":[
        {
          "name": "name1",
          "dependencies": [
            {
              "url": "examlple.com"
            },
            {
              "url": "google.com"
            }
          ]
        },
        {
          "name": "name2",
          "dependencies": [
            {
              "url": "yahoo.com"
            },
            {
              "url": "google.com"
            }
          ]
        }
      ],
      "links":[
      ]
    }

结果(如果我双击第一个节点):

姓名:name1
谷歌.com

我的目标(如果我双击第一个节点):

姓名:name1
exmaple.com
谷歌.com

我的结论

为了显示数组的对象，我应该需要像我一样创建一个循环。但是当循环应用于 d3 .html 时，它会覆盖 html 2 次，当然它会显示最后的数据。

我的问题

如何在 d3 .html 中为我的数组创建一个循环？或者还有另一种方法可以在 d3 工具提示中显示数组对象吗？

谢谢

Answer 1

您可以创建一个字符串，并在每次迭代时将所需的数据添加到该字符串中:

    var myString = "";
    var i = 0;
    while(i<2){
       myString = myString + ("<p>" + d.dependencies[i].url + "</p>");
       i++;
    }
    myTollTip.style("opacity", "1")                           
       .style("display", "table-cell")  
       .style("vertical-align", "top")
       .html("<p>Name: " + d.name + "</p>" + myString);

检查这个 fiddle 。我画了两个圆圈，每个圆圈代表一个节点。单击圆圈时会出现工具提示:https://jsfiddle.net/gerardofurtado/gtvcbosh/2/