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");

//这也是......（你可以用onclick替换'ng-click'，我正在使用AngularJs）

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

d3 tree - 如何在圆圈上添加按钮/模板？

3 个答案: