Question

我继承了一些泡泡图代码，我需要添加气泡图标签的文本包装。

如何在此方案中应用How to linebreak an svg text within javascript?的答案？我不明白如何让d3更改解决方案中给出的svg标记。

这是我的代码：

            function renderBubbles(root) {
                var diameter = element[0].offsetWidth * .6,
                    format = d3.format(",d"),
                    color = d3.scale.category20c();

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

                var svg = d3.select(element[0]).append("svg")
                    .attr("width", diameter)
                    .attr("height", diameter)
                    .attr("class", "bubble");


                var node = svg.selectAll(".node")
                    .data(bubble.nodes(classes(root))
                        .filter(function (d) {
                            return !d.children;
                        }))
                    .enter().append("g")
                    .attr("class", "node")
                    .attr("transform", function (d) {
                        return "translate(" + d.x + "," + d.y + ")";
                    })
                    .on('mouseover', function (d) {
                        var nodeSelection = d3.select(this).style({opacity: '0.5'});
                    })
                    .on('mouseout', function (d) {
                        var nodeSelection = d3.select(this).style({opacity: '1'});
                    })
                    .on("click", function (d) {
                        $log.debug(d);
                    })


                node.append("title")
                    .text(function (d) {
                        return d.className + ": " + format(d.value);
                    });

                node.append("circle")
                    .attr("r", function (d) {
                        return d.r;
                    })
                    .style("fill", function (d) {
                        return color(d.packageName);
                    })


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

// Returns a flattened hierarchy containing all leaf nodes under the root.
                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, className: node.name, value: node.size});
                    }

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


                d3.select(self.frameElement).style("height", diameter + "px");

以下是给出的解决方案：

<g transform="translate(123 456)"><!-- replace with your target upper left corner coordinates -->
  <text x="0" y="0">
    <tspan x="0" dy="1.2em">very long text</tspan>
    <tspan x="0" dy="1.2em">I would like to linebreak</tspan>
  </text>
</g>

Answer 1

试试这个。这是Lars的解决方案，它不是来自我自己。但它在我的项目中很有用：

...
yoursvg.append("text")
                    .attr('x', function(d){
                        return path.centroid(d)[0];
                    })
                    .attr('y', function(d){
                        return path.centroid(d)[1] + 4;
                    })
                    .each(function (d) {
                        var arr = d.properties.eventname.split(" ");
                        if (arr != undefined) {
                            for (var i = 0; i < arr.length; i++) {
                                d3.select(this).append("tspan")
                                    .text(function(){
                                        return arr[i];
                                    )
                                    .attr("y", path.centroid(d)[1] + i*8 + 8)
                                    .attr("x", path.centroid(d)[0])
                                    .attr("text-anchor", "middle");
                            }
                        }
                    });

Answer 2

@Mark谢谢。

DList (map negate)

d3.js如何以声明方式应用文本换行

2 个答案: