D3 CSV导入排序功能显示

Question

我要这样做:http://examples.oreilly.com/0636920026938/chapter_10/14_div_tooltip.html除了自定义数据有两个字段:一个"月"和一个"比率"。

这是我的javascript代码，它看起来非常类似于上面发布的链接。http://pastebin.com/KG2tX5Xm主要的区别在于规模(我的是跨月份的)和需要基于数据的x, y属性。

当我查看页面的源代码时，我看到矩形的坐标在点击后确实发生了变化;然而，他们仍然呆在原地。为什么会这样，我该如何解决?

Answer 1

当您.sort()选择(在本例中为rect元素)时发生变化的是每个元素的索引。数据不会改变。您链接到的示例使用各个元素的索引来确定排序后和重绘期间条的x位置。因此，条的位置发生了变化。

在代码中，您根本没有使用条形图的索引来确定它们的位置。您使用的是绑定到元素的数据，在排序时不会更改。

您的一般方法与您所链接的示例中所采用的方法不同。在这里，数据本身被排序(或者更确切地说是选择)，其顺序与条形图的位置有关。在你所做的事情中，数据的顺序并不重要，因为你只是在使用数据本身。

因此，要使排序发挥作用，请更改代码以使用索引来确定条形图的位置:

svg.selectAll("rect")
    .sort(function(a, b) {
            if (sortOrder) {
                    return d3.ascending(a.Ratio, b.Ratio);
            } else {
                    return d3.descending(a.Ratio, b.Ratio);
            }
    })
    .transition()
    .delay(function(d, i) {
            return i * 50;
    })
    .duration(1000)
    .attr("x", function(d, i) {
            return i * x.rangeBand();
    });