Дерево d3 - Как добавить кнопки / шаблоны на круги?

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-click" onclick, я использую AngularJs)

table.append("tr").append("td")
    .append("button")
    .attr("ng-click", function(d){return d.url;})
    .text("Search");

Каждый узел содержит круг и текст

<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>

;)