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

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

我编制了这个简单的例子，以便更容易地向你展示最新情况。我只是在我的工具提示中列出名称和依赖关系。

我的提示

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":[ 
     ] 
    }

结果（如果我加倍的第一个节点点击）：

名称：名1
google.com

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

名称如：name1
exmaple.com
google.com

我的结论

那么显示一个数组的对象我应该需要像我一样创建一个循环。但是随着循环应用于d3.html，它重写了html 2次，当然它显示了最后的数据。

我的问题

我怎么能有一个循环只是我的D3的.html里面阵列？或还有另一种在d3工具提示中显示数组对象的方法吗？

感谢

来源

2016-06-07 faia20

您可以创建一个字符串，在每次迭代，所需的数据添加到字符串：

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/

来源

2016-06-07 13:29:10

谢谢杰拉尔多！我很满意你的解决方案！ – faia20

我的头脑在哪里？我写了'myArray'，但它是一个字符串！刚编辑答案！ :-) –

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

回答

相关问题