Question

我是d3和javascript的新手，我试图用一些相当简单的条形图来解决一些可能的交互。

我想要实现的目标：

我希望您可以选择在单击其中一个条形时按值对条形图进行排序，然后按键按字母顺序对其进行排序。

到目前为止我的进展：

我的条形图基于一系列对象，其中键是公司的名称，值表示每个公司的平均满意度，从0到100。

var data = [
    {key: "Test 1",  value: 21},
    {key: "Test 2",  value: 34},
    ...
    {key: "Test 12", value: 22},
    {key: "Test 13", value: 97}
];

您可以在此处查看我的进度和整个代码：bl.ocks.org

我试图创建一个对数组进行排序的函数。但是我几乎失去了如何实际重新定位条形码，因为所有的条形图最初都是根据它们的键定位的，我不知道如何按照顺序进行定位。

var x = d3.scaleBand()
    .domain(data.map(function(d){
        return d.key;
    }))
    .range([margin.left, width])
    .padding(0.1);

 var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d){
        return d.value;
    })])
    .range([height, margin.top])


 var sortBars = function(){
 svg.selectAll("rect")
    .sort(function(a,b){
        return b.value-a.value;      
    })
    .transition("sort")
    .duration(100)
    .attr("x", function(d,i){
        return x(d.key);
    })  
 }

首先我想如果我对数组进行排序，那么基于键的返回值应该基于新的顺序，但它似乎不起作用。

非常感谢您提供任何提示或帮助！

Answer 1

执行此操作的一种简单方法是对数据阵列进行排序，然后重新计算域。按键：

data.sort(function(a, b) {
  return d3.ascending(a.key, b.key)
})
x.domain(data.map(function(d) {
  return d.key;
}));

按价值：

data.sort(function(a, b) {
  return d3.descending(a.value, b.value)
})
x.domain(data.map(function(d) {
  return d.key;
}));

这是你的bl.ocks带有这些变化，我放了两个按钮：https://bl.ocks.org/anonymous/bc5a9691a3417b403d4e8ade3297afa3/3a2434c1c2849e476791e581754ec27e055db4d6

PS：请记住，按键排序是排序字符串。因此，“测试2”在“测试13”之后出现。如果你想要序列“测试1”，“测试2”，“测试3”等，你将不得不修改你的字符串。

如何按值或键对D3条形图（基于对象数组）进行排序？

1 个答案: