我该如何解决这个条形图排序问题？

Here is a JSFiddle我目前面临的问题。我该如何解决这个条形图排序问题？

基本上，我有一个对象的数组，我用来绘制一些酒吧。在对数组进行排序后，我尝试相应地更新小节'y的位置，但这不起作用。

所以，这是我用来绘制酒吧规模：

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

所以，如果我有3间酒吧和酒吧为40像素高，然后我映射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？

来源

2013-11-15 Ashitaka

[This Sample]（http://jsbin.com/ijepod/1/edit）可能会帮助 – functionoid

谢谢！这是最受欢迎的。所以我不需要对数组进行排序，然后通过'data（）'函数将其绑定到数据上，我只需要在条上调用'sort（）'函数。如果你想提交某种答案，我会很乐意接受它。 – Ashitaka

我很高兴它为你工作。既然你自己想出了自己，你应该得到信用。如果您发现评论有帮助，您可以投票评论。 – functionoid

所以我想出了问题所在。由于我正在对一个对象数组进行排序，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。

来源

2013-11-16 13:18:28 Ashitaka

Your Fiddle is very long。我建议把它恢复到最低水平，并寻求帮助。

例如，尝试测试

console.log(chartData.users)

你声明chartData之后。它看起来与排序的相同，所以它可能不是排序错误。如果你自己做更多的工作，然后问一个更具体，更简洁的问题，你可能会得到更多的答案。

祝你好运D3！

来源

2013-11-15 11:03:40

我已经减少了大量的代码，你应该看到真正的脚本大声笑。这只是'setTimeout'函数内部的代码，这真的很重要。是的，奇怪的是阵列是相同的，但它们不是。如果你删除了setTimeout函数，你会发现数组以[[50，30，40]开始）（就像绘制条形图一样），只有在setTimeout函数内部，它才会被命令为[[50，40，30 ]'。 – Ashitaka

我该如何解决这个条形图排序问题？

回答

相关问题