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

调整您链接的示例中的换行功能，如下所示，并在帖子中使用所需的呼叫签名。工作示例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);
            }
        }
    });
}

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

1 个答案: