HeatMap - dc.js 和 d3.js 使用 JSON 数据答案

【问题标题】：HeatMap - dc.js and d3.js using JSON dataHeatMap - dc.js 和 d3.js 使用 JSON 数据
【发布时间】：2015-03-13 20:50:44
【问题描述】：

我可以使用 CSV 文件中的数据，使用 d3.js、dc.js 和交叉过滤器创建热图。

代码：

var chart = dc.heatMap("#test");
d3.csv("morley.csv", function(error, experiments) {
  var ndx    = crossfilter(experiments),
      runDim = ndx.dimension(function(d) { return [+d.Run, +d.Expt]; }),
      runGroup = runDim.group().reduceSum(function(d) { return +d.Speed; });
  chart
    .width(45 * 20 + 80)
    .height(45 * 5 + 40)
    .dimension(runDim)
    .group(runGroup)
    .keyAccessor(function(d) { return +d.key[0]; })
    .valueAccessor(function(d) { return +d.key[1]; })
    .colorAccessor(function(d) { return +d.value; })
    .title(function(d) {
        return "Run:   " + d.key[0] + "\n" +
               "Expt:  " + d.key[1] + "\n" +
               "Speed: " + (299000 + d.value) + " km/s";})
    .colors(["#ffffd9","#edf8b1","#c7e9b4","#7fcdbb","#41b6c4","#1d91c0","#225ea8","#253494","#081d58"])
    .calculateColorDomain();
  chart.render();
});

但我想使用 JSON 数据做同样的事情，也许是一个包含一些 json 数据的数组。这似乎是一个菜鸟问题，但我找不到任何将 JSON 数据用于热图的示例。

【问题讨论】：

标签： javascript json angularjs d3.js dc.js

【解决方案1】：

如果您使用的是 JSON 文件，那么代码将大致相同，只需将 d3.csv 替换为 d3.json。

如果数据已经加载到浏览器中，那么你可以删除这个函数并运行：

var experiments = JSON.parse(json_object) //if json_object is still a string
var ndx = crossfilter(experiments)

其余的代码都是一样的。

【讨论】：