我想在 d3js 上的序列旭日形图上增加多边形面包屑的宽度

Question

我的图表基于示例：

https://bl.ocks.org/kerryrodden/7090426

我想调整面包屑多边形大小以增加宽度。这是我从原始版本中更改的内容-

entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .attr("width",500)
      .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; });

我还附上了截图。 PS：我添加了一个宽度属性，但没有成功。请帮忙。 I have attached the image showing the need for increasing the width of the breadcrumb

Answer 1

从您提供的示例中我可以理解，您需要修改breadcrumbPoints 函数，以便面包屑宽度不是固定的，而是（我假设的字符串）名称的长度：

// Generate a string that describes the points of a breadcrumb polygon.
function breadcrumbPoints(d, i) {
  var points = [];
  var bcLen = d.name.length + 10; // name here should be string else d.name.toString().length
  points.push("0,0");
  points.push(bcLen + ",0"); // instead of b.w which is fixed
  points.push(bcLen + b.t + "," + (b.h / 2)); // same
  points.push(bcLen + "," + b.h); // same
  points.push("0," + b.h);
  if (i > 0) { // Leftmost breadcrumb; don't include 6th vertex.
    points.push(b.t + "," + (b.h / 2));
  }
  return points.join(" ");
}

我还没有尝试过，但这对我来说似乎很合乎逻辑，所以，试一试，让我知道它是否有效 :)

祝你好运！

编辑：想想看，你也应该相应地更改文本中的x：

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

还有：

// Set position for entering and updating nodes.
  g.attr("transform", function(d, i) {
    return "translate(" + i * (d.name.length + 10 + b.s) + ", 0)";
  });