javascript - D3 CSV导入排序功能展示

Question

我要这样做:http://examples.oreilly.com/0636920026938/chapter_10/14_div_tooltip.html具有两个字段的自定义数据除外:“月份”和“比率”。

这是我的 JavaScript 代码，看起来与上面发布的链接上的代码非常相似。 http://pastebin.com/KG2tX5Xm主要区别在于规模(我的跨月)和 x、y 属性，这些属性需要基于 data.Ratio 或 data.Month。

当我查看页面源代码时，我发现点击后矩形的坐标确实发生了变化；然而，他们仍坚守岗位。这是为什么？如何解决？

Answer 1

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

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

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

因此，为了使排序产生效果，请更改代码以使用索引来确定条形的位置:

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();
    });