如何选择:d3.js中的last-child？

Question

我需要操纵text轴的第一个和最后一个刻度的元素,使它们更朝向中心.

我试图选择它们,当时只有一个类似svg.select('.tick:last-child text')但是它不起作用.然后我申请.transform('translate(4,0)')......

难道我做错了什么？我怎样才能做到这一点？

Answer 1

您可以做的一件事是通过添加方法来创建自定义子选择d3.selection.prototype.您可以创建一个selection.first()方法来选择选择中的第一个项目,以及一个selection.last()选择最后一个项目的方法.例如:

d3.selection.prototype.first = function() {
  return d3.select(this[0][0]);
};
d3.selection.prototype.last = function() {
  var last = this.size() - 1;
  return d3.select(this[0][last]);
};

这可以让你做到以下几点:

var tickLabels = svg.selectAll('.tick text');

tickLabels.first()
  .attr('transform','translate(4,0)');
tickLabels.last()
  .attr('transform','translate(-4,0)');

当然,如果你这样做,你需要确保你只有一个轴.否则,在初始选择中指定轴:

var tickLabels = svg.selectAll('.axis.x .tick text');

这是一个例子.

Answer 2

它们在d3中不存在,但您可以在节点上使用.firstChild和.lastChild方法.

您可以先选择节点的所有父节点,然后在.each()方法范围内操作,如下所示:

d3.selectAll('.myParentElements').each(function(d,i){
  var firstChild = this.firstChild,
      lastChild = this.lastChild;

  //Do stuff with first and last child
});

在范围内.each(),this指的是未被d3选择包装的单个节点,因此节点上的所有标准方法都可用.

Answer 3

谷歌把我带到这里,我也想为亚当格雷写的更清晰的方法.有时您只想在不参考selectAll的情况下进行此操作.

svg.selectAll('.gridlines').filter(function(d, i,list) {
    return i === list.length - 1;
}).attr('display', 'none');

filter函数的第3个参数为您提供所选的元素列表.

Answer 4

这是我发现的最干净的方法:

g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();