Question

我正在尝试创建精简矩形图表，我需要一个可以获取文本并正确包装的方法。

目标是创造这样的东西。

d3.js how to apply text wrapping declaratively Lars提出了一个解决方案 - 我已经尝试在这里实施它 - 但我无法让它发挥作用。

const axisLabel = chart
  .append("g")
  .append("text")
  .attr('x', function(d) {
    return path.centroid(d)[0];
  })
  .attr('y', function(d) {
    return path.centroid(d)[1] + 4;
  })
  .each(function(d) {
      var arr = d.properties.eventname.split(" ");
      if (arr != undefined) {
        for (var i = 0; i < arr.length; i++) {
          d3.select(this).append("tspan")
            .text(function() {
                return arr[i];
              })
              .attr("y", path.centroid(d)[1] + i * 8 + 8)
              .attr("x", path.centroid(d)[0])
              .attr("text-anchor", "middle");
            }
        }
      });

这里的方法有tspans，这几乎可以工作 - 但是文本没有居中？

http://jsfiddle.net/0ht35rpb/169/

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

Answer 1

您的代码中没有path，因此没有质心。

因此，它应该是：

.attr('x', function(d) {
    return config.width / 2;
})
.attr('y', function(d) {
    return config.height;
})

这是您更新的小提琴：http://jsfiddle.net/vumbvs9s/

关于你的第二个小提琴，只需改变Bostock的功能即可获得当前的x位置：

var x = text.attr("x");

这是更新的小提琴：http://jsfiddle.net/a0s8h3wg/

d3.js动态文本包装

1 个答案: