Svg 如何将条形图与x轴的刻度同步排序

我采用Mike Bostock的例子对条形图进行排序-

但是，条形图的过渡和x轴的记号不会同时发生。 原因是分别为条和记号调用转换（在函数change（）中）：

解决方案应该是在构建svg时，我想将每个条添加到相应的勾号中。 但是，我没有成功地正确调整线路

  svg.selectAll(".bar")
  .data(data)
.enter().append("rect")...

e、 g

或

好主意

您可以通过以下方式将

rects

与每个勾号的

g

分组：

svg.selectAll(".x>.tick")
  .data(data)
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return -x.rangeBand()/2; // set x to be half width, tick g will position it
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return -(height - y(d.frequency)); // set y to negative
  })
  .attr("height", function(d) {
    return height - y(d.frequency);
  });

然后您必须重写转换，因为调用

.call（xAxis）；

将重新创建勾号

g

，并删除条

transition.selectAll(".x>.tick")
  .delay(delay)
  .attr("transform", function(d) {
    return "translate(" + x0(d.letter) + ",0)";
  });

---

把这个放进去。

Bingo。这似乎是正确的解决方案。非常感谢，今天晚些时候我有机会尝试时，我会接受并投票给你答案。你能详细说明一下css选择器的工作原理吗（例如，与我的选择器相比）因为我读到的所有关于数据联接的文章都解释了联接，而不是如何在DOM树的不同位置追加元素。@ee2Dev，

g.tick

不起作用，它也会返回y记号。

.x.axis

不起作用，因为它返回的是包含x记号的

g

，而不是记号本身。最后，

.bar

返回矩形，但您希望矩形中的矩形，而不是矩形中的刻度（以利用d3的轴辅助对象）。最后，我发现我需要删除

。enter（）

在我的

.x>.tick之后

因为轴数据已经绑定到每个tick，并且d3在绑定rect数据后不会重新进入。非常感谢您的快速回复！在M Bostocks示例中，差异并不明显，但在我自己的代码中，它确实显示了…我回顾了我做错的事情。实际上，与我上面写的不同，我尝试了：svg.select（“.x.axis”）.selectAll（“.tick”）.selectAll（“.bar”）.data（data）。enter（）.append（“.rect”）……遵循典型的enter，update模式。但这为每个tick创建了所有条线！我必须仔细考虑您的方法，我猜您只要附加数据并附加条线，就知道它们匹配了……任何方法都与…selectAll（.bar）匹配的原因.data（data）.enter（）.ap‌​pend（“rect”）…不起作用的是，任何enter（）选择都包含一个存储父节点的组。然后，构成enter（）选择的所有元素都会在父节点之后依次追加或插入。因此，使用enter（）选择不可能以非后续方式分发元素。

svg.selectAll(".x.axis")
  .data(data)
.enter().append("rect")...// would put the bars after all g.tick's at the end. So again I can't grap the whole group together later.

svg.selectAll(".x>.tick")
  .data(data)
  .append("rect")
  .attr("class", "bar")
  .attr("x", function(d) {
    return -x.rangeBand()/2; // set x to be half width, tick g will position it
  })
  .attr("width", x.rangeBand())
  .attr("y", function(d) {
    return -(height - y(d.frequency)); // set y to negative
  })
  .attr("height", function(d) {
    return height - y(d.frequency);
  });

transition.selectAll(".x>.tick")
  .delay(delay)
  .attr("transform", function(d) {
    return "translate(" + x0(d.letter) + ",0)";
  });