d3のデータの属性に応じて、tspanをg要素に動的に追加します。

Question

tspan〜g要素をdに含まれる属性に応じて追加します。

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の可変数の簡単な例です：動作しますが、私は複数の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>