根據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

使用a。 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>