Question

我采用了Mike Bostock的可排序条形图代码（https://bl.ocks.org/mbostock/3885705）并将其转换为水平条形图。

我遇到了酒吧“消失”的问题。初始显示很好。所有条形按变量datesort的降序显示，y轴显示datesort变量。然后第一次排序发生，事情开始分崩离析。它按升序dateort排序并显示值变量。但是，如果多个dateort有一个值（例如：数据点的日期分配为3,16,18,34,36和51都具有值64），则只有最后一个条（在本例中为第51个条）绘制了64的值。

然后，如果我取消选中Sort Values复选框，它会对显示值变量的降序值进行排序。但每个值只有一个条形。因此，虽然我希望看到六条长度（值）64（对应于3,16,18等的日期），但它只显示一条。

我不知道如何解决这个问题，以便所有酒吧都能留下图表，并希望能得到帮助。

代码的相关部分：

svg.selectAll(".bar")
          .data(data)
        .enter().append("rect")
          .attr("class", "bar")
          .attr("x", 0)
          .attr("height", y.bandwidth())
          .attr("y", function(d) { return y(d.datesort); })
          .attr("width", function(d) { return x(d.value); });

 d3.select("input").on("change", change);

 var sortTimeout = setTimeout(function() {
   d3.select("input").property("checked", true).each(change);
}, 2000);

  function change() {
    clearTimeout(sortTimeout);

    // Copy-on-write since tweens are evaluated after a delay.
    var y0 = y.domain(data.sort(this.checked
        ? function(a, b) { return b.datesort - a.datesort; }
        : function(a, b) { return d3.ascending(a.value, b.value); })
        .map(function(d) { return d.value; }))
        .copy();

    svg.selectAll(".bar")
        .sort(function(a, b) { return y0(a.value) - y0(b.value); });

    var transition = svg.transition().duration(750),
        delay = function(d, i) { return i * 50; };

    transition.selectAll(".bar")
        .delay(delay)
        .attr("y", function(d) { return y0(d.value); });

    transition.select(".y.axis")
        .call(yAxis)
      .selectAll("g")
        .delay(delay);

感谢。

d3 Bostock的可排序条形图“消失”了

0 个答案: