在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工具提示

回答

相關問題