Question

基本上，我试图使用Mike this example的wrap（）函数将svg：text元素中的文本换行到任意宽度。我的数据比他的嵌套更多，我尝试在传入之前调整（错误），但没有成功。我一直盯着这个......并且可能错过了显而易见的事情。

.text(function(d){
    var sel = d3.select(this); 
    sel[0][0].__data__ = d.name; 
    return wrap(sel,50);}
);

我在FIDDLE中添加了一个最小的示例，并附有适当的注释。解决方案不应涉及改变数据的当前结构，因为我无法改变它。

感谢您的帮助。谢谢！

Answer 1

在上面的评论中，每次与Lars交换时，错误的转换似乎都会阻止文本的包装，即使换行功能正在其他方面正在完成其工作。这是一个FIDDLE，其中包含一系列评论，用于识别问题的位置，但我还不清楚问题背后的原因。

...
.transition().duration(1000) // transition here "prevents" wrapping
.text(function(d) { return d.name; })
.call(wrap, 40)
...

感兴趣的一个注意事项与wrap函数本身有关。它使用来自正在包装的文本的y坐标，但假设x坐标为0.这对我不起作用，因为我的文本是通过一些数学计算放置的。暂且不说我应该将计算结果移到父g，这是一种可能发生的情况。解决方案很简单......使用被包裹元素的x坐标，就像使用y坐标一样：

y = text.attr("y"),
x = text.attr("x"), // added x attribute of text being wrapped

然后确保在函数的其余部分使用它：

...
tspan = text.text(null).append("tspan").attr("x", x).attr("y", y).attr("dy", dy + "em");
...
tspan = text.append("tspan").attr("x", x).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
...

使用mbostock的wrap函数包装svg：text

1 个答案: