Question

Here is a JSFiddle我目前面临的问题。

基本上，我有一个对象数组，用于绘制一些条形图。在对数组进行排序之后，我尝试相应地更新柱'y位置，但这不起作用。

所以，这是我用来绘制条形的比例：

var yScale = d3.scale.ordinal()
    .domain(d3.range(0, numberOfBars))
    .rangeBands([0, numberOfBars * barHeight]);

所以，如果我有3个柱并且条形高40px，那么我将映射0-3 =＆gt; 0-120px。

接下来，我有一个使用此比例的函数返回正确的y位置：

var y = function(d, i) {
    return yScale(i);
};

使用此y函数绘制条形图后，我对数据数组进行排序并尝试重绘条形图：

barsContainer.selectAll('.bar')
    .data(chartData.users)
    .transition()
      .duration(750)
      .delay(delay)
      .attr('y', y); // Not working. I thought this would order the bars.
      //.attr('y', 120); // This works though. It moves all the bars to this y.

这是我难倒的地方。由于我重新排序了数组（chartData.users），并且因为条形与数据“连接”，所以条形不应该根据数据在数组中的新位置改变它们的y吗？

Answer 1

所以我弄清楚问题是什么。由于我正在对一个对象数组进行排序，因此D3.js无法弄清楚哪些数组对象与哪些DOM对象相匹配。所以我必须创建一个关键功能来识别对象：

var key = function(d) { return d.id }

然后，我所要做的就是使用此键函数调用data()然后order()，因此DOM顺序与数组顺序匹配：

barsContainer.selectAll('.bar')
  .data(chartData.users, key)
  .order()
  .transition()
    .delay(delay)
    .duration(750)
    .attr('y', y);

Here's the working JSFiddle

Answer 2

你的小提琴很长。我建议将其恢复到最低限度并寻求特定点的帮助。

例如，尝试测试

console.log(chartData.users)

在您声明chartData之后立即执行。它似乎与已排序的一个相同，因此可能不是排序错误。如果你自己做更多的工作，然后问一个更具体，简洁的问题，你可能会得到更多的答案。

祝你好运！

如何修复此条形图排序？

2 个答案: