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的开发工具时。

中有信息

所以...是什么原因导致信息未出现在图表中？

我只是在码本D3 chart , wrap the text with is not appear上加了一点。

Answer 1

我用

结束了这个问题

.append("svg:tspan")

并包装文本引用Wrapping Text in D3