使用d3在树中添加列表或垂直tspans

Question

我正在尝试学习d3库并在树中包含一个列表。类似的东西：

JSFiddle：link

我不认为我理解向节点添加数据的概念。请浏览此链接：How selection work in d3?

Answer 1

您可以使用subselection：

执行此操作

// keep reference to appended text elements
var someText = nodeEnter.append("text")
    .attr("class", "properties")
    .attr("text-anchor", "middle")
    .attr("y", 52)
    .style("fill-opacity", 1);

// sub-select them with properties array
someText.selectAll('tspan')
    .data(function(d) {
        return d.properties || []; // catch situation where child has no properties
    })
    .enter()
    .append('tspan')
    .attr("x", 0)
    .attr('dy', "0.9em")
    .text(function(d) {
        return d;
    });

更新了fiddle。