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时，我想将每个条添加到相应的tick中。但是我没有成功地正确调整线

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

e.g。

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轴的刻度同步的条形图进行排序

1 个答案: