1

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

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

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

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

因此，如果我有 3 个条形图并且一个条形图的高度为 40 像素，那么我将映射 0-3 => 0-120 像素。

接下来，我有一个使用此比例返回正确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根据数据在数组中的新位置改变它们吗？

4

2 回答 2

1

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

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

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

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

这是工作的 JSFiddle。

于 2013-11-16T13:18:28.810 回答
0

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

例如，尝试测试

console.log(chartData.users)

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

祝D3好运！

于 2013-11-15T11:03:40.430 回答