Select 如何选择：d3.js中的最后一个孩子？

我需要操纵轴的第一个和最后一个记号的

文本

元素，使它们更靠近中心

我试图用类似于

svg.select（'.tick:last child text'）

的东西来选择它们，一次选择一个。然后我将应用

.transform（'translate（4,0）

---

我做错什么了吗？如何实现这一点？

它们在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（）

的范围内，

这个
指的是单个节点，它没有被d3选择包住，因此节点上的所有标准方法都可用。
可以做的一件事是通过向
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');

就是一个例子。
使用带有函数的
.filter（）
：

当谷歌把我带到这里的时候，我还想给亚当·格雷（Adam Grey）写的东西添加一个更干净的方法。
有时，您只想在不引用selectAll的情况下执行此操作

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

filter函数的第三个参数为您提供所选元素列表。
以下是我找到的最干净的方法：

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

它适用于D3.js v4

例如：

你能详细说明一下它是怎么不起作用的吗？也许可以举个例子？原则上它应该工作。使用
。勾选：第一个孩子
应该工作，但
。勾选：最后一个孩子
不会工作。如果元素是其父元素的第一个子元素或最后一个子元素，而不仅仅是其特定类型的第一个子元素或最后一个子元素，则第一个子元素和最后一个子元素选择器会选择这些元素。在d3轴上，记号永远不是其父元素的最后一个子元素，因为父
g
元素包含轴本身的路径以及记号，并且该路径位于记号之后，使其成为最后一个子元素。您可以轻松找到
的第一个和最后一个元素。但是，请选择All
。请参见下面的我的答案。@jshanley您可以使用
：last of type
而不是
：last child
Thx来获得答案。我接受@jshanley的，因为它更接近我想要的。太棒了。谢谢，我需要它，而且它可以在开箱即用的情况下完美地工作+1只是一个简短的补充：请记住，在d3.js v4中，selectAll返回一个不同的对象，因此必须调用nodes（）方法来获取对象数组。e、 g.d3.选择所有（“.axis.x.tick text”）.nodes（）[0]作为第一个元素，只需添加@stijena所说的内容。对于D3V4及以上版本，使用
d3.selection.prototype.first=function（）{return d3.select（this.nodes（）[0]）；}
和
d3.selection.prototype.last=function（）{返回d3.select（this.nodes（）[this.size（）-1；]）；}
g.selectAll(".tick:first-of-type text").remove();
g.selectAll(".tick:last-of-type text").remove();

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

var lines = svg.selectAll('line');
   lines.first()
      .attr('transform','translate(4,0)');
   lines.last()
      .attr('transform','translate(-4,0)');