在D3 4.0之前,传递给修改方法的函数接收父元素的索引作为第三个参数。
例如,要在正方形中显示a b c d
,我可以
var data = [
['a', 'b'],
['c', 'd']
];
var n1 = d3.select('svg').selectAll('g').data(data)
.enter().append('g');
n1.selectAll('text').data(function(d) { return d; })
.enter().append('text')
.attr('x', function(d, i) {
return i*50;
})
.attr('y', function(d, i, parentIx) {
return parentIx*50 + 10;
})
.text(function (d) {
return d;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg style='width:100px; height:100px'></svg>
在4.0中,the third argument is now the current group (nodes)。将D3指向4.0源会明显破坏y
属性:
var data = [
['a', 'b'],
['c', 'd']
];
var n1 = d3.select('svg').selectAll('g').data(data)
.enter().append('g');
n1.selectAll('text').data(function(d) { return d; })
.enter().append('text')
.attr('x', function(d, i) {
return i*50;
})
.attr('y', function(d, i, parentIx) {
return parentIx*50 + 10;
})
.text(function (d) {
return d;
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg style='width:100px; height:100px'></svg>
除了navigating the DOM和计算索引之外,还有办法确定父元素的索引吗?