Javascript d3.js为Y轴包装长标签

参考Mike Bostock的例子，我想将同样的想法应用到X和Y切换的条形图上。因此标签沿Y轴上下移动

在这个例子中：我只是简单地复制Mike示例中的wrap函数，并将其应用到我的图表中

function wrap(text, width) {
text.each(function() {
  var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}

在Mike将此应用于x轴的示例中，仅当超过某一行长度时，才会将单词放在新行上。在我的小提琴里，它把每一个字都放在一行上。另外，我想知道如果创建了一条新线，是否有办法将y属性向上移动一点，使其仍然居中

有人能帮我翻译y轴的wrap（）函数吗

---

wrap（）函数是在第203行定义的，从那把小提琴的第135行调用的。

我正在寻找这个问题的解决方案，发现Mike Bostock已经发布了一个。该示例适用于x轴，但很容易适用于y轴。不需要修改

wrap（）

函数，而是必须将其应用于y轴，以指示可能应用的正确宽度变量

在最初的示例中，垂直图表，

wrap（）

的调用如下：

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
.selectAll(".tick text")
  .call(wrap, x.rangeBand());

水平图表的特定细节可能会有所不同，但保存宽度值的典型变量是margin.left，如以下代码段所示：

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
.selectAll(".tick text")
  .call(wrap, margin.left);

---

OP中要求的其余功能将需要修改

wrap（）

我无法真正让您的JSFIDLE正常工作，事情似乎被推到了左边，但无论如何，我认为我发现了您的问题

关于你的第一个问题，为什么每一个单词都被压缩到它自己的行。我相信这是因为你发送给包裹的宽度很小，用来决定什么时候休息。在JSFIDLE中，对wrap的调用是：

调用（wrap，yScale.rangeBand（））

yScale.rangeBand（）

是一个非常小的值，在我的分辨率中是36像素。这意味着，一旦标签超过36像素，它将进入换行符（添加tspan）。不使用范围带，您希望将此数字作为图表的左边距（y轴左侧的空间）

最后，在垂直居中方面，您需要确定标签分解为多少行，以便知道每个行向上移动多少。为此，可以在包裹的末尾添加以下两行：

var breaks=text.selectAll（“tspan”）[0]。长度；
text.selectAll（“tspan”）.attr（“y”、-9*（breaks-1））

第一段代码获取标签拆分成的行数。第二，选择标签的所有T平移，并相应地向上移动以使其居中。我使用的
-9
仅适用于默认字体大小。有一种可能更好的方法来计算这个数字，以处理多种字体大小

你看到了吗？为了将来的参考，这种类型的功能将来可能会存在于D3中