在 D3.js html 工具提示中显示数组值答案

【问题标题】：Show array values in D3.js html tooltip在 D3.js html 工具提示中显示数组值
【发布时间】：2016-06-07 11:24:13
【问题描述】：

我正在尝试在 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
google.com

我的目标（如果我双击第一个节点）：

姓名：name1
exmaple.com
google.com

我的结论

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

我的问题

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

谢谢

【问题讨论】：

标签： javascript arrays d3.js

【解决方案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);

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

【讨论】：