D3 图表，不出现用 <tspan> 换行的文本

Question

我使用d3图表CodeFlower Source code visualization制作一些图表

我还通过模拟节点的代码添加每个节点的文本 像这样

this.text
    .enter()
    .append("svg:text")
    .attr("class", "nodetext")
    .classed("directory", d => (d._children || d.children ? 1 : 0))
    .text(d => "There is a long long long words")
    .attr("name", d => 'd.name')
    .attr("dy", d => -16)
    .attr("dx", d => 0)
    .attr("text-anchor", "middle")
    .call(this.force.drag);

但现在因为文字太长无法显示。我只需要一行大约 10 个字符。

因此我在文本代码后添加一些

this.text
    .enter()
    .append("svg:text")
    .attr("class", "nodetext")
    .classed("directory", d => (d._children || d.children ? 1 : 0))
    .attr("name", d => 'd.name')
    .attr("dy", d => -16)
    .attr("dx", d => 0)
    .attr("text-anchor", "middle")
    .call(this.force.drag)
    .append("tspan")
    .text(d => "There is a long long logn words")
    .attr("dx", 0)
    .attr("dy", 14)
    .attr("fill", "#000");

但带有的图表没有出现在购物车中

当我检查 chrome 的开发工具时。

里面有信息

那么...是什么原因让信息没有出现在图表中？？？

我只是在 codepen D3 chart , wrap the text with is not appear 上推送了一个最小值。

Answer 1

我用

结束了这个问题

.append("svg:tspan")

并包装文本引用Wrapping Text in D3