嵌套选择中父元素的索引

时间:2016-07-27 11:11:59

标签: javascript d3.js

在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和计算索引之外,还有办法确定父元素的索引吗?

0 个答案:

没有答案