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');

HERE就是一个例子。

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');

过滤器函数的第3个参数为您提供所选的元素列表。

Answer 4

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

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

Answer 5

将.filter()与函数一起使用也可以selection.filter(filter) ：

var gridlines;

gridlines = svg.selectAll('.gridlines');

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

Answer 6

D3.js v4

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)');

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

6 个答案: