具有数据驱动宽度限制的 D3 Wordwrap

Question

在 D3 中创建一些文本并自动换行非常简单：

var textElement = svg.selectAll('text')
                   .data(myData)
                   .enter()
                   .append('text')
                   .text(someVeryLongText)
                   .call(wrapText, allowedWidth);

wrapText() 函数是使用相当标准的示例之一实现的（例如http://bl.ocks.org/mbostock/7555321）。

我遇到的问题是，当我想让每个文本字段的允许宽度取决于数据时，例如：

                   ...
                   .text(someVeryLongText)
                   .call(wrapText, function(d) {
                     return d.someCondition ? 100 : 200;
                   });

这样的事情可能吗？

Answer 1

如下所示调整您链接的示例中的 wrap 函数，并在您的帖子中使用所需的调用签名。工作示例here。

function wrap(text, width) {
    text.each(function(d, i/*[edit]*/) {
        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"),
            //[edit]add dWidth
            dWidth = typeof width === "function" ? width(d, i) : width;
        while (word = words.pop()) {
            line.push(word);
            tspan.text(line.join(" "));
            if (tspan.node().getComputedTextLength() > dWidth/*[edit]*/) {
                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);
            }
        }
    });
}