根据 d3 中数据中的属性将 tspan 动态添加到 g 元素

Question

我想根据 d 中是否存在的属性将 tspan 添加到 g 元素。

  var nodes = tree.nodes(root).reverse(),     links = tree.links(nodes);

  nodes.forEach(function(d) { d.y = d.depth * 180; });

  var node = svg.selectAll("g.node")      .data(nodes, function(d) { return d.id || (d.id = ++i); });

  var nodeEnter = node.enter().append("g")    .attr("class", "node")     .attr("transform", function(d) { 
          return "translate(" + d.y + "," + d.x + ")"; });

 nodeEnter.selectAll('g.user-info')
    .append('tspan');//how can i dynamically add tspan to g

我尝试了以下方法：

 nodeEnter.selectAll('g.user-info')
    .append('tspan',function(d){ if d.id==1 return " " else return "tspan"});/

但它不起作用，因为无论给定条件如何，它都会添加tspan。

Answer 1

使用 .filter:

nodeEnter.selectAll('g.user-info')
  .filter(function(d){
    return d.id === 1;
  })
  .append('tspan');

基于属性的多个tspan：

每当我听到基于数据的可变数量时，我想nested-selection。例如，下面是一个基于属性“角色”的可变编号tspan 的快速示例：

var svg = d3.select('body')
  .append('svg')
  .attr('width', 500)
  .attr('height', 500);
  
var data = [{role: "one"},{role: "two"},{role: "three"}];

var tE = svg.selectAll('text')
  .data(data)
  .enter()
  .append('text');
  
tE.selectAll('tspan')
  .data(function(d){
    switch(d.role){
      case "one":
        return d3.range(1);
        break;
      
      case "two":
        return d3.range(2);
        break;
      
      case "three":
        return d3.range(3);
        break;
    }
  })
  .enter()
  .append("tspan")
  .text(function(d){ return d });

<script src="http://d3js.org/d3.v4.js"></script>