D3.js 包装svg：文本与mbostock'；s包裹函数

基本上，我尝试使用Mike提供的wrap（）函数将svg:text元素中的文本包装到任意宽度。我的数据比他的数据嵌套得多，我试图在传入数据之前对其进行调整（er hack），但没有成功。我盯着这件事看了太久了…可能错过了显而易见的东西

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

我在a中给出了一个简单的示例，并给出了适当的注释。解决方案不应该涉及改变数据的当前结构，因为我无法改变它

---

谢谢你的帮助。谢谢

在上面的评论中，与Lars的每次交流中，位置不当的转换似乎阻止了文本的换行，即使换行功能正在完成它的工作。下面是一组注释，确定了问题的位置，尽管我还不清楚问题背后的原因

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

---

使用

foreignObject

和一个

div

的fixed with可能更好。谢谢Lars…foreignObject不是一个选项…IE中不支持。你是否看到Mike示例中传递的选择与我示例中传递的选择之间有任何显著差异？如果我在示例中使用相同的方法--Lars，有两点：像最初那样调用函数对我来说是失败的，因为一个错误的转换调用阻止了包装，因此我放弃了。一旦我工作了，我必须改变迈克的函数来考虑被包裹的文本的x属性…如果文本的x，y是通过一些数学计算径向放置的话，0将不会剪切它。我改了。你想怎么做？我可以写我自己的答案，但你的测试触发了解决方案。你愿意把你的答案贴出来，我会通过评论的方式注意到变化吗？等等，我不明白你的意思。你是说我改装的小提琴符合你的要求，还是在某种程度上不起作用？