d3 树 - 如何在圆圈上附加按钮/模板？答案

【问题标题】：d3 tree - How to append buttons/templates on circles?d3 树 - 如何在圆圈上附加按钮/模板？
【发布时间】：2013-12-13 10:52:21
【问题描述】：

我正在处理这个example。

我的问题是如何在一个圆圈中创建/附加 html 元素。这只是基本的想法。如果有更好的解决方案，请告诉我。

谢谢

【问题讨论】：

标签： html templates d3.js tree append

【解决方案1】：

要在 SVG 中使用 HTML 元素，您需要使用 foreignObject element，它允许您嵌入 HTML 元素。这是执行此操作的 D3 example。这允许您将任意内容放入圆圈内，您必须相应调整其半径以适应内容。

【讨论】：

【解决方案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>

修改circle中的r属性得到更大的，text中的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>

;)

【讨论】：

嘿，你误会了。文字没有问题。我想包括按钮（html）和东西。看看 Lars Kotthoffs 的回答。

【解决方案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");

// 还有这个...（你可以用 onclick 替换 'ng-click'，我使用的是 AngularJs）

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

【讨论】：