D3 get previous element in .data()

Question

如何获取.data()在d3中传递给数据集的前一个元素的值？

我知道在回调中我不能做类似的事情

function(d,i) { console.log(d, i); })

例如,将数据元素及其索引打印到控制台.但是我怎样才能引用前面的元素呢？

喜欢d[i-1]什么？

Answer 1

您可以像这样获得前一个元素的值.

var texts = svg.selectAll("text")
    .data(data)
    .enter()
    .append("text")
    .attr("x",function(d){ return d.x; })
    .attr("y",function(d){ return d.y; })
    .text(function(d){ return d.name; });

texts.attr(...,function(d,i){
         ......
         var prevData = texts.data()[i-1]; //check whether i>0 before this code
         .......
     });

这是一个小例子JSFiddle,鼠标在文本上查看功能.

Answer 2

没有内置的方法可以做到这一点,但你可以通过各种方式实现它,包括

范围:

var data = ['a','b','c','d']
d3.select('.parent').selectAll('.child')
  .data(data)
.enter()
  .append('div')
  .attr('class', 'child')
  .text(function(d,i) {
    return "previous letter is " + data[i-1];
  });

链接(即使它们是字符串也可以工作,如本例所示):

var data = ['a','b','c','d']
for(var i = 0; i < data.length; i++) { data[i].previous = data[i-1]; }
d3.select('.parent').selectAll('.child')
  .data(data)
...
.text(function(d,i) {
  return "previous letter is " + d.previous
});

通过父节点(实验):

var data = ['a','b','c','d']
d3.select('.parent').selectAll('.child')
  .data(data)
...
.text(function(d,i) {
  var parentData = d3.select(this.parentNode).selectAll('.child').data();
  // NOTE: parentData === data is false, but parentData still deep equals data
  return "previous letter is " + parentData[i-1];
});

与上一个示例相关,您甚至可以尝试在此节点之前找到同级DOM节点.就像是

...
.text(function(d,i) {
  var previousChild = d3.select(this.parentNode).select('.child:nth-child(' + i + ')')
  return "previous letter is " + previousChild.datum();
})

但是最后两个可能会以各种方式失败,例如,如果DOM节点的排序方式不同data,或者父节点中是否存在其他不相关的DOM节点.