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

使用。filter：

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

基于属性的多个tspan：

每当我听到基于数据的可变数量时，我认为nested-selection。例如，以下是基于属性＆＃34;角色＆＃34;的变量tspan的快速示例：

＆＃13;

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 });

＆＃13;

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

＆＃13;

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

1 个答案: