Javascript D3垂直条形图向标签文本添加换行符

我试图打破y轴标签的长线。我的条形图类似，但标签较长（通常超过10个带空格的单词）。这是我的代码（它工作正常，我看到了图表，唯一的“错误”是文本，我以友好的方式加载JSON，这些数据仅用于此）：

HTML:

我也试过：

bar.append("text")
    .attr("class", "label_txt1")    
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("fill", "red")
    .attr("dy", ".35em")
    .text(function(d) { return d; });

chart.selectAll(".label_txt1").call(wrap, 40)

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

我将

text（）

更改为

html（）

，因为我读到：

在浏览器中，我看到用class

label\u txt1

创建的

。当我尝试使用

selectAll（“.label_txt1”）

选择文本时，我得到的是行的值，而不是文本

有人能帮我吗？

当您使用svg文本节点时，您引用的这一方法是进行文本换行的标准方法。你只是说它错了（在错误的课堂上，你在包装数字）。将其简化为：

// Draw labels
bar.append("text")
  .attr("class", "label_txt")
  .attr("x", function(d) {
    return -10;
  })
  .attr("y", groupHeight / 2) //<-- not sure you need this
  .attr("dy", ".35em")
  .text(function(d, i) {
    if (i % data.series.length === 0)
      return data.labels[Math.floor(i / data.series.length)];
    else
      return ""
  })
  .call(wrap, 40);

//绘制标签
附加条（“文本”）
.attr（“类”、“标签”）
.attr（“x”，函数（d）{
返回-10；
})
.attr（“y”，groupHeight/2）//我在我的一个项目中这样做的方法是创建一个函数
formatLines（text，lineWidth，maxLines）
。然后逐字将字符串放入SVG文本元素中，直到
elem.getComputedTextLength（）
超过
maxWidth
。它将元素的内容（减去最后一个单词）推送到一个要返回的数组中。重复此操作，直到
array.length==maxLines
或字符串为空。我会使用
.selectAll（“text”）.data（formatLines（…）.enter（）.append（“text”）
，然后按文本高度垂直偏移每个文本元素
.attr（“y”，函数（d，i）{returni*textHeight；}）。可能存在的重复项
bar.selectAll('.label_txt1').each(insertLinebreaks);

bar.append("text")
    .attr("class", "label_txt1")    
    .attr("x", function(d) { return x(d) - 3; })
    .attr("y", barHeight / 2)
    .attr("fill", "red")
    .attr("dy", ".35em")
    .text(function(d) { return d; });

chart.selectAll(".label_txt1").call(wrap, 40)

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

// Draw labels
bar.append("text")
  .attr("class", "label_txt")
  .attr("x", function(d) {
    return -10;
  })
  .attr("y", groupHeight / 2) //<-- not sure you need this
  .attr("dy", ".35em")
  .text(function(d, i) {
    if (i % data.series.length === 0)
      return data.labels[Math.floor(i / data.series.length)];
    else
      return ""
  })
  .call(wrap, 40);