如何修复此条形图排序

How can I fix this bar chart sorting?

本文关键字：排序 条形图 何修复      更新时间：2023-09-26

这是我目前面临的问题的JSFiddle。

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

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

var yScale = d3.scale.ordinal()
    .domain(d3.range(0, numberOfBars))
    .rangeBands([0, numberOfBars * barHeight]);
因此，如果我有 3 个柱线，

并且一个柱线高 40px，那么我映射 0-3 => 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吗？

所以我弄清楚了问题所在。由于我正在对对象数组进行排序，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);

这是工作JSFiddle。

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

例如，尝试测试

console.log(chartData.users)

在声明图表数据后立即。它似乎与排序的相同，因此可能不是排序有问题。如果你自己做更多的工作，然后问一个更具体、更简洁的问题，你可能会得到更多的答案。

祝D3好运！

相关文章：