使用D3.JS访问JS对象中的'值'使用D3.JS

我正在使用D3.js，并尝试按下按钮时按升序/降序对我的酒吧进行排序。但我有问题的sortBars函数从我的对象返回正确的值。使用D3.JS访问JS对象中的'值'使用D3.JS

var sortOrder = false; 
var sortBars = function() { 
sortOrder = !sortOrder; 
svg.selectAll("rect") 
    .sort(function(a, b) { 
     if (sortOrder) { 
      return d3.ascending(a, b); 
     } else { 
      return d3.descending(a, b); 
     } 
    }) 
    .transition() 
    .delay(function(d, i) { 
     return i * 50; 
    }) 
    .duration(1000) 
    .attr("x", function(d, i) { 
     return xScale(i); 
    }); 
};

当它返回xScale等（我），我知道这是不恰当地引用我的数据集。我试过把它作为i.value（这就是我的名字在我的数据集中命名）。我知道这是不正确的，但是当我改变它的时候，我至少会让酒吧移动。我将如何访问正确的数据？

我为此开发了一个JSFiddle。随意与它一起玩。目前，排序按钮不会有任何效果（因为该功能尚未正确访问数据）。

来源

2013-04-18 EnigmaRM

你的代码几乎是好的，只有两个细节：

比较函数必须返回正数，负数或零。在您的代码中，您正在比较数据项，而不是它们的值：

function sortItems(a, b) { 
    if (sortOrder) { return a.value - b.value; } 
    return b.value - a.value; 
} 

svg.selectAll('rect') 
.sort(sortItems) 
// update the attributes

sortBars方法不起作用。我宁愿事件使用D3绑定：

// Bind the event 'onclick' to the sortBars functions 
d3.select('#sort').on('click', sortBars);

我叉你的jsfiddle和调整，使其工作：http://jsfiddle.net/pnavarrc/3HL4a/4/

参考

https://github.com/mbostock/d3/wiki/Selections#wiki-sort

来源

2013-04-18 17:48:55

这似乎太简单了！哈哈。我想我比我的if/else尝试更好。我假设我的问题是xScale返回索引，我甚至不认为它会与sort（）本身有关...现在我更加关注它。也看到你更新了我的文字 - 还没有完成。谢谢！ – EnigmaRM

我想你非常接近。 xscale应该使用i - 这是列表中数据的位置（不是d中的数据）。然而，你的排序是试图排序数据对象，而不是值。试试这个：

.sort(function(a, b) { 
    if (sortOrder) { 
     return d3.ascending(a.value, b.value); 
    } else { 
     return d3.descending(a.value, b.value); 
    } 
})

我觉得有两个对象是未定义哪一个更大。升序和降序功能不需要访问器。

来源

2013-04-18 17:53:55 Superboggly

当然，这个问题并没有在'sort（）'中增加'value'。好的解决方案谢谢。 – EnigmaRM

使用D3.JS访问JS对象中的'值'使用D3.JS

回答

相关问题