Question

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

我知道在回调中我不能做像

这样的事情

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

链接（即使它们是＆＃39;字符串也是如此），如本例所示：

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节点。

D3获取.data（）中的前一个元素

2 个答案: