如何对与 x 轴刻度同步的条形图进行排序

Question

我正在采用 Mike Bostock 的示例对条形图进行排序 - http://bl.ocks.org/mbostock/3885705。

但是，条形图的过渡和 x 轴的刻度线并未同时发生。原因是为柱线和报价单分别调用了转换（在函数 change():

transition.selectAll(".bar")
    .delay(delay)
    .attr("x", function(d) { return x0(d.letter); });

transition.select(".x.axis")
    .call(xAxis)
  .selectAll("g")
    .delay(delay);

解决方法应该是在构建svg时，我想将每个柱添加到相应的刻度。但是我没有成功正确调整线

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

例如

svg.selectAll("g.tick")
  .data(data)
.enter().append("rect")...// would put all the bars under each g.tick

或

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.

Answer 1

有趣的想法。

您可以通过以下方式将 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)";
  });

把这个 together.

如何对与 x 轴刻度同步的条形图进行排序

How to sort bar charts synchronous with the ticks of x axis

svg

d3.js