Question

我在我从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;
    });

森伯斯特看起来像这样。文本不适合多边形面包屑，无法正确显示。文本的某些部分已被删除。

Answer 1

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

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

Answer 2

我将采取的解决此问题的方法是使用普通的html和css。让css通过使用一小组规则来处理元素。

而不是svg让我们为面包屑创建一个容器

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

让我们更新你的mouseover功能：

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
        });
    // ...
}

我们还需要更新mouseleave功能：

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

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

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

现在让我们声明一下css规则（从这里得到它们https://css-tricks.com/triangle-breadcrumbs/），以获得我们想要实现的视觉方面：

#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;
}

最终结果如下：

工作小提琴：http://jsfiddle.net/zv3zvur6/1/

Answer 3

感谢大家的回复。为了增加尺寸和获得相同宽度的面包屑，我已经改变了多边形点，我的代码现在看起来像这样。

<a>
  <b id="1"></b>
  <b id="2"></b>
  <b id="3"></b>
  <b id="4"></b>
  <b id="5"></b>
</a>

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

3 个答案: