0

我正在尝试制作一个热图网格，该网格描述了不同国家（行）中任意参数在不同年份（列）中的排名。初始地图在这里：

http://bl.ocks.org/phattwizat/5471768

我想在转换中通过第 6 列的升序值重新组织行，但是我正在努力确定如何指定选择和随后的必要排序。

我无法弄清楚如何最好地实现排序。有人可以建议吗？争论我是否应该重新格式化数据，也许是一个对象数组 - 如果简化的话，每行 1 个，列数据作为对象属性。

4

1 回答 1

2

使用 D3，通常最好使用对象数组。您已经接近一个好的解决方案，但是维护行和列的层次结构让您头疼。

为了使事情更简单，创建一个数组，其中包含一个对象，该对象代表您要从数据集对象绘制的每个正方形：

data = []; 
dataset.forEach(function(d){
    for (year = 2003; year < 2010; year++){
        data.push({"year": year, "Country": d["Country Name"], "value": d[year]});
    }
});

现在数据格式正确，显示网格只需要几行代码：

var cells = grid.selectAll("rect")
            .data(data)
        .enter().append("svg:rect")
        .attr("class", function(d){ return color(d.value); })
        .attr("x", function(d) { return (d.year - 2003)*cellSize; })
        .attr("y", function(d) { return (countryOrder.indexOf(d.Country))*cellSize; })
        .attr("width", cellSize - cellBorder)
        .attr("height", cellSize - cellBorder)

更改排序顺序就像更改 countryOrder 数组一样简单，花哨的转换只是一个教程！

var countryOrder = ["USA", "France", "Italy", "Canada", "Germany", "Ireland"];

http://bl.ocks.org/1wheel/5475820

于 2013-04-28T04:56:02.713 回答