javascript - D3圆包: html in text attribute

Question

下面的代码工作正常，因为我可以将文本字符串输出到气泡中。

但是如何将 HTML 标记输出到气泡文本标签中？您可以在第一个“名称”属性中看到我的 HTML 标记。

这个div在这个例子中非常简单，但它最终会包含更多的标记和一个css的class id

<script>
    $(document).ready(function () {
        var json = {
            "name": "flare",
            "children": [
                { "name": "<div>test1<br>test again</div>", "size": 20, "color": "#ff0000" , "id": 1},
                { "name": "test2", "size": 40, "color": "#ffff00", "id": 2},
                { "name": "test3", "size": 60, "color": "#ff0000", "id": 3},
                { "name": "test4", "size": 80, "color": "#ff00ff", "id": 4 },
                { "name": "test5", "size": 100, "color": "#0000ff", "id": 5}
            ]
        };

        var r = 400,
            format = d3.format(",d"),
            fill = d3.scale.category20c();

        var bubble = d3.layout.pack()
            .sort(null)
            .size([r, r])
            .padding(1.5);

        var vis = d3.select("#chart").append("svg")
            .attr("width", r)
            .attr("height", r)
            .attr("class", "bubble");

        var node = vis.selectAll("g.node")
            .data(bubble.nodes(classes(json))
            .filter(function (d) { return !d.children; }))
            .enter().append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.x + "," + d.y + ")"; });

        node.append("circle")
            .attr("r", function (d) { return d.r; })
            .style("fill", function (d) { return d.color; })
            .on("click", function (d) { alert("id: " + d.id); });

        node.append("text")
            .attr("text-anchor", "middle")
            .attr("dy", "0.3em")
            .text(function (d) { return d.dispText.substring(0, d.r / 3); });

        function classes(root) {
            var classes = [];

        function recurse(name, node) {
            if (node.children)
                node.children.forEach(function (child) {
                    recurse(node.name, child);
                });
            else
                classes.push({
                    packageName: name, dispText: node.name, value: node.size, color: node.color, id: node.id});
            }

            recurse(null, root);
            return { children: classes };
        }

    });

    </script>

Answer 1

您需要 foreignObject 标记，它允许您嵌入 HTML(或其他 XML 命名空间)- Mike Bostock 在这里有一个很好的使用示例:http://bl.ocks.org/mbostock/1424037

在您的情况下，这可能看起来像(未经测试):

node.append("foreignObject")
    // I believe w/h are required, though the size is arbitrary
    .attr("width", 200)
    .attr("height", 50)
  .append("xhtml:body")
    .html(function (d) { return d.dispText.substring(0, d.r / 3); });