Javascript 如何在不剪切文本的情况下将文本包装在SVG多边形内

我在从GitHub获得的sunburst中使用了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;
    });

太阳暴流看起来像这样。 文本不适合多边形面包屑，显示不正确。课文的一部分被删去了

---

解决这个问题的方法是使用纯html和css。让css使用一组小规则来安排元素

代替svg，让我们为面包屑创建一个容器

<div id="main">    
    <div id="sequence-container">
        <div id="sequence" class="breadcrumbs-container"></div>
    </div>
    <!-- rest of html -->
</div>

我们还需要更新

mouseleave

功能：

function mouseleave(d) {
    // ...
    // Remove breadcrumbs
    var breadcrumbs = d3.select('#sequence').selectAll('.breadcrumb-custom')
        .data([]);
    breadcrumbs.exit().remove();
    // ...
}

您有一个函数负责面包屑初始化，我们还需要删除对该函数的调用：

function mouseover(d) {
    // ...
    var sequenceArray = getAncestors(d);
    // updateBreadcrumbs(sequenceArray, percentageString); remove this!
    var breadcrumbs = d3.select('#sequence').selectAll('.breadcrumb-custom')
        .data(sequenceArray); // join data
    // usual update pattern 
    breadcrumbs.exit().remove();
    breadcrumbs.attr('class', 'breadcrumb-custom')
    breadcrumbs.enter()
        .append('li')
        .attr('class', 'breadcrumb-custom')
        .append('a')
        .style('background', function (d) {
            return color((d.children ? d : d.parent).name);
        })
        .style('border-left-color', function (d) {
            return color((d.children ? d : d.parent).name);
        })
        .html(function (d) {
            return d.name
        });
    // ...
}

function createVisualization(json) {
    // initializeBreadcrumbTrail(); remove!
}

现在让我们声明css规则（从这里获得），以获得我们想要实现的视觉效果：

#sequence-container {
  width: auto;
  height: 80px;
}
.breadcrumbs-container {
   list-style: none;
   overflow: hidden;
   font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumbs-container li {
   float: left;
}
.breadcrumbs-container li a {
   color: white;
   text-decoration: none;
   font-size: 10px;
   padding: 15px 0 10px 55px;
   position: relative;
   display: block;
   float: left;
}
.breadcrumbs-container li a:after {
   content: " ";
   display: block;
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid;
   border-left-color: inherit;
   position: absolute;
   top: 50%;
   margin-top: -50px;
   left: 100%;
   z-index: 2;
}
.breadcrumbs-container li a:before {
   content: " ";
   display: block;
   width: 0;
   height: 0;
   border-top: 50px solid transparent;
   border-bottom: 50px solid transparent;
   border-left: 30px solid white;
   position: absolute;
   top: 50%;
   margin-top: -50px;
   margin-left: 1px;
   left: 100%;
   z-index: 1;
}
.breadcrumbs-container li:first-child a {
   padding-left: 10px;
}

最终结果如下所示：

---

工作小提琴：

谢谢大家的回复。为了增加面包屑的大小和宽度，我修改了多边形点，代码如下所示

函数面包屑点（d，i）{
var点=[]；
点。推（“0,0”）；
点推（b.w*2+“，0”）；
点推（b.w*2+b.t+“，”+（b.h/2））；
点推力（b.w*2+“，”+b.h）；
点。推力（“0，”+b.h）；
如果（i>0）{//最左边的面包屑；不包括第六个顶点。
点推（b.t+“，”+（b.h/2））；
}
返回点。连接（“”）；
}
//更新面包屑痕迹以显示当前顺序和百分比。
函数UpdateBradCrumps（nodeArray，percentageString）{
//数据连接；键函数结合名称和深度（=顺序中的位置）。
变量g=d3。选择（“轨迹”）
.全选（“g”）
.data（noderray，函数（d）{返回d.name+d.depth；}）；
//为输入节点添加面包屑和标签。
var entering=g.enter（）.append（“svg:g”）；
输入.append（“svg:polygon”）
.attr（“点”，面包屑点）
.style（“fill”，函数（d）{返回颜色（（d.children？d:d.parent）.name）；}）
//.style（“fill”，函数（d）{返回颜色[d.name]；}）；
输入.append（“svg:text”）
.attr（“x”，b.w+b.t/2））
.属性（“y”，b.h/2）
.attr（“dy”，“0.36em”）
.attr（“文本锚定”、“中间”）
.text（函数（d）{返回d.name；}）
.样式（“填充”、“白色”）；
//设置输入和更新节点的位置。
g、 属性（“变换”，函数（d，i）{
返回“translate（“+i*（b.w+b.s）*2+”，0）”；
});
//删除退出的节点。
g、 退出（）.remove（）；
//现在移动并更新末尾的百分比。
d3.选择（“尾迹”）。选择（“尾标”）
.attr（“x”，节点长度+0.5）*（b.w*2+b.s））
.属性（“y”，b.h/2）
.attr（“dy”，“0.36em”）
.attr（“文本锚定”、“中间”）
.text（百分比字符串）
.style（“填充”、“绿色”）
//如果面包屑痕迹隐藏，则使其可见。
d3.选择（“轨迹”）
.style（“可见性”）；
}

要在级别（同级）内从左向右移动鼠标时更新面包屑，请将var breadcrumbs更改为：

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

---

这是面包屑点数代码。函数breadcrumbPoints（d，i）{var points=[]；points.push（“0,0”）；points.push（b.w+”，0“）；points.push（b.w+b.t+”，“+（b.h/2））；points.push（b.w+”，“+b.h）；points.push（“0，+b.h）；if（i>0）{//最左边的面包屑；不包括第六顶点.points.push（b.t+”，“+”（b.h/2））；}返回点。连接（“”；}你能提供一个plnkr或JSFIDLE的工作代码吗？嗨，这里是JSFIDLE链接：谢谢你的帮助嗨，所有面包屑的宽度都是一样的，我有点改变了多边形点。这是我使用的代码：@torresomar，这非常有帮助，工作得很好。但是现在有了鼠标悬停，在ar内向左或向右移动c（兄弟姐妹）vs向下移动不会更新面包屑。是否有方法更正此问题？如果有其他简单的方法，请告诉我。提前感谢