d3樹 - 如何在圓圈上添加按鈕/模板？

Question

我正在使用這個example。

我的問題是如何創建/附加HTML元素在一個圓圈。這只是基本的想法。如果有更好的解決方案，我會很感激，如果你告訴我。

感謝

Answer 1

要使用SVG HTML元素，你需要使用foreignObject element，它使您可以嵌入HTML元素。這是D3 example這樣做。這使您可以將任意內容放入圓圈內，圓圈的半徑必須相應調整以適應內容。

Answer 2

每個節點包含一個圓圈和文本

<g class="node" transform="translate(360,165.2173913043478)"> 
    <circle r="4.5" style="fill: rgb(255, 255, 255);"> 
    <text x="-10" dy=".35em" text-anchor="end" style="fill-opacity: 1;">interpolate</text> 
</g> 

修改圓r屬性來獲得文本中的大和x參數將文本設置到了中圈，這樣的：

<circle r="28.5" style="fill: rgb(255, 255, 255);"> 
<text x="24" dy=".35em" text-anchor="end" style="fill-opacity: 1;">interpolate</text> 

）

Answer 3

var menu = { 
     "nodes": [ 
      {id: 0, "x": 300, "y": 250, "url": "newProject()", "text": "New Project", "bcolor": "#000099", "color": "white", "dx":-40}, 
      {id: 1, "x": 300, "y": 10, "url": "search('project')", "text": "Project", "bcolor": "#FF9900", "color": "black", "dx":-30}, 
      {id: 2, "x": 10, "y": 400, "url": "search('customer')","text": "Customer", "bcolor": "#FF9900", "color": "black", "dx":-40}, 
      {id: 3, "x": 600, "y": 400, "url": "search('unit')","text": "Unit Title", "bcolor": "#FF9900", "color": "black", "dx":-30}]}; 

var width = 900, height = 600; 

var svg = d3.select("#projectMenu").append("svg") 
    .attr("width", width) 
    .attr("height", height); 

var w = 200, h = 100; 
var node = svg.selectAll(".node") 
     .data(menu.nodes) 
     .enter().append("g") 
      .attr("class", "node"); 

node.append("rect") 
      .attr("width", w) 
      .attr("height", h) 
      .attr("x", function(d) {return d.x;}) 
      .attr("y", function(d) {return d.y;}) 
      .attr("rx", 10) 
      .attr("ry", 10) 
      .attr("fill", function(d) {return d.bcolor;}); 

/*這是你）*/

var fo = node.append("foreignObject") 
       .attr("width",w) 
       .attr("height",h) 
       .attr("x", function(d) {return d.x;}) 
       .attr("y", function(d) {return d.y;}) 

//重要：前綴命名空間，使D3呈現以下HTML代碼

  .append("xhtml:body") 
       .attr("class", "projectMenu") 
      .append("div"); 

var table = fo.append("table") 
    .attr("class", "projectMenu"); 

table.append("tr").append("td") 
    .append("p") 
    .attr("class", "projectMenu") 
    .text(function(d) {return d.text;}); 

table.append("tr").append("td") 
    .append("input") 
    .attr("name", "byName") 
    .attr("class", "input"); 

//這也太......（你可以通過替換 'NG單擊' onclick，我正在使用AngularJs）

​​