javascript - D3图表，用没有出现

Question

我用d3图表CodeFlower源码可视化做了一些图表

我还添加了每个节点的文本，并像这样模拟节点的代码

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图表上推了一个最小的，用不出现的换行文本。

标签： javascriptd3.jssvg

Answer 1

我用

.append("svg:tspan")

并在 D3 中包装文本参考Wrapping Text