我怎样才能解决这个条形图排序问题？
我怎样才能解决这个条形图排序问题？
提问于 2013-11-15 01:38:00
关于我目前面临的问题的这是一个JSFiddle。
基本上，我有一个数组的对象，我用来画一些酒吧。在对数组进行排序之后，我尝试相应地更新条形条的y位置，但这不起作用。
所以，这就是我用来画条子的比例：
var yScale = d3.scale.ordinal()
.domain(d3.range(0, numberOfBars))
.rangeBands([0, numberOfBars * barHeight]);因此，如果我有3小节，而一条高40‘m，那么我将映射0-3 => 0-120’m。
接下来，我有一个函数，它使用这个比例返回正确的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吗？
回答 2
Stack Overflow用户
回答已采纳
发布于 2013-11-16 13:18:28
所以我想出了问题所在。由于我正在对一个对象数组进行排序，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。
Stack Overflow用户
发布于 2013-11-15 11:03:40
你的坐骑很长。我建议把它减到最低限度，并在这一点上寻求帮助。
例如，尝试测试
console.log(chartData.users)在您声明chartData之后立即。它似乎与排序相同，所以可能不是排序错误。如果你自己做更多的工作，然后问一个更具体、更简洁的问题，你可能会得到更多的答案。
祝D3好运！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19991940
复制相关文章
相似问题
腾讯云开发者
