D3：如何使用本地 JSON 数据构建 HeatMap答案

【问题标题】：D3: How to construct HeatMap using local JSON dataD3：如何使用本地 JSON 数据构建 HeatMap
【发布时间】：2016-01-11 13:25:09
【问题描述】：

我正在尝试使用存储在 JSON 对象中的动态数据构建日/夜热图，但未能成功。我可以使用本地存储的 tsv 文件。

这是代码示例。我只想从“数据”变量中读取，它是一个 json。

我指的是这个：http://bl.ocks.org/ianyfchang/8119685

【问题讨论】：

没有任何代码/数据，我们无法为您提供适当的帮助。什么不工作？ 我无法成功提供的信息不是很多。
//这是有效的：d3.tsv("data.tsv", function(d) { return { row: +d.row_idx, col: +d.col_idx, value: +d.幅度};}，函数（错误，数据）{console.log（JSON.stringify（数据））；var colorScale = d3.scale.quantile（）.domain（[0，桶-1，d3.max（数据， function(d) { return d.value; })]) .range(colors); ....... }); //但我想使用局部变量 // data= JSON.stringify(jsondata);
不在 cmets 中！更新您的问题。

标签： javascript json d3.js

【解决方案1】：

如果我没有弄错你的问题，

您想知道如何将 Json 文件或 Javascript 对象转换为 D3 数据

对吗？

不知道你是否看过文档中关于d3.tsv的章节。

TSV 的工作方式与 CSV 类似，唯一的区别是分隔符。

您可能会在示例代码中注意到这个片段：

d3.tsv("data_heatmap.tsv",
function(d) {
  return {
    row:   +d.row_idx,
    col:   +d.col_idx,
    value: +d.log2ratio
  };
},
function(error, data) {...}

在文档中，Wiki>Reference>csv

d3.csv(url[[, accessor], callback])

针对指定 url 的逗号分隔值 (CSV) 文件发出 HTTP GET 请求。

...

可以指定一个可选的访问器函数，然后将其传递给d3.csv.parse；

我上面引用的片段只是将 TSV 数据转换为 Javascript 对象的访问器。

换句话说，D3 不会处理 TSV 或 CSV 格式的数据，它只处理已解析的 Javascript 对象。

还有回调函数：片段中的function(err,data){...}。它处理数据分析和图形绘制。

那么我们应该如何处理一个对象？

只需将其传递给您在d3.tsv(file,accessor,callback) 中调用的callback 函数即可。

它的工作方式与调用 TSV 文件的方式相同。

希望对您有所帮助。

【讨论】：

我想从局部变量而不是从外部文件传递对象。我正在动态收集数据。那么如何传递变量而不是文件。
@Faiyaz 。正如我所解释的，当您处理 tsv 时，您会获取文件、解析它并将解析的数据通过管道传输到回调函数中。现在您只需将数据通过管道传输到回调函数中。如果需要解析，手动解析。

【解决方案2】：

试试这个http://cal-heatmap.com/

这个我用过很多次了，效果很好，使用也很简单。

【讨论】：