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
google.com

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

姓名：name1
exmaple.com
google.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);

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

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

1 个答案: