![tspan]( "tspan")
我想根据中存在的属性将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。 最佳答案
使用。filter：
nodeEnter.selectAll('g.user-info')
.filter(function(d){
return d.id === 1;
})
.append('tspan');
基于属性的多个tspan：
每当我听到基于数据的可变数量的数据时，我都会认为
nested-selection。例如，下面是基于属性“ role”的可变数量
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>
关于javascript - 根据d3中数据的属性将tspan动态添加到g元素，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42350879/