d3 text-wrap 插件改变坐标答案

【问题标题】：d3 text-wrap plugin changes coordinatesd3 text-wrap 插件改变坐标
【发布时间】：2019-07-17 17:23:30
【问题描述】：

我会换行动态文本。

我正在使用d3-textwrap 插件。

我尝试应用文档中提到的内容

let textWrap;
let d3Text1 = d3.selectAll(stations);
textWrap = d3wrap.textwrap().bounds({ height: 100, width: 100 });
d3Text1.call(textWrap); // commenting this will make initial position but no wrap

插件正在运行，但文本正在从它的初始位置移动*

文本换行之前

文字换行后

这里是stackblitz的复制品

【问题讨论】：

标签： javascript html angular d3.js svg

【解决方案1】：

这似乎不是一个不正确的位置，有很多方法可以解决这个问题，最好的方法是您必须更正如何在该 SVG 中附加文本，以解决您必须创建一个组来保存文本的问题，这个方法很简单。

将您的 updateStationsName 函数替换为：

updateStationsName(stations: any, svgTitleDOM: HTMLElement) {
    let textWrap;
    let d3Text1 = d3.selectAll(stations);
    textWrap = d3wrap.textwrap().bounds({ height: 100, width: 100 })

    d3Text1.each(function(d,i){
        // Select the text
        var text = d3.select(this).text() 
        // Get transform position
        var trans = d3.select(this).attr('transform')
        // Remove text
        d3.select(this).remove()
        // Create Group with that text in that position
        var a = d3.select('svg').append('g')
        a.attr('transform', trans )
            .append('text')
            .text(text)
            .call(textWrap);
        // Transform the d3wrap box to make pretty
        a.select('foreignObject').attr('y', -25)
    })

  }

职位有什么问题？
该插件会自行销毁您的 SVG 文本元素并替换为 foreignObject 这会销毁所有设置的位置

为什么要在追加文本之前绘制组？
是为了摆正位置

【讨论】：

在运行时有效，我现在的问题是 stations 变量是从 dom 选择 this.stations = svgTitleDOM.querySelectorAll('g > text'); 获取的，所以当我再次触发时，我的组件 stations 的长度为空。我怎样才能让它动态工作。（看看我的演示第 17 行：那个 DOM 选择功能将不再起作用
我认为该插件对我没有帮助，因为我应该在 text svg 元素上动态注入文本，但在下一次更改时，由于先例更改，我将无法选择它，是对的吗？唯一的解决方案是重新加载我的组件？
如果你有新的问题，把它放在一个新的问题上，因为如果你把它全部放在一个问题上，就会有多个答案，这个很难跟踪，请一步一步做。不要忘记制作演示代码，干杯
是的，您的回答对我的问题有效，即使这会对我的主要代码产生副作用。所以我认为它可以。我找到了另一种适用于所有情况的简单解决方案。使用 foreignObject 并将我的文本包装到 p HTML 元素中。

【解决方案2】：

另一种解决方案是使用 svg 文件中的 foreignObject 而不是 text 元素将文本包装到 p HTML 元素中。

【讨论】：