javascript - 如何在不剪切文本的情况下将文本包裹在SVG多边形内

Question

我在旭日中使用了从 GitHub 获得的 SVG 多边形。面包屑上呈现的文本不适合多边形。我已经更改了多边形的宽度，但它不起作用。如何将文本包裹在 svg:polygon 内？

这是代码:

var entering = g.enter().append("svg:g");

entering.append("svg:polygon")
    .attr("width",100)//I have changed the width but it is not working
    .attr("height",100)
    .attr("points", breadcrumbPoints)
    .style("fill", function(d) {
        return color((d.children ? d : d.parent).name);
    })
//  .style("fill", function(d) { return colors[d.name]; });

entering.append("svg:text")
    .attr("x", (b.w + b.t)/2)
    .attr("y", b.h / 2)
    .attr("dy", "0.35em")
    .attr("text-anchor", "middle")
    .text(function(d) {
        return d.name;
    });

旭日看起来像这样。文本不适合多边形面包屑，并且无法正确显示。部分文字已被删除。

Answer 1

要在关卡(同级)内从左向右移动鼠标时更新面包屑，请将 var breadcrumbs 更改为:

var breadcrumbs = d3.select('#sequence').selectAll('.breadcrumb-custom')
    .data(sequenceArray, function(d) { return d.name + d.depth; });