热图 - dc.js 和 d3.js使用 JSON 数据
HeatMap - dc.js and d3.js using JSON data
我可以使用 d3.js、dc.js 和交叉过滤器创建热图,使用 CSV 文件中的数据。
法典:
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 数据作为热图的示例。
如果您使用的是 JSON 文件,那么代码将大致相同,只需将d3.csv
替换为 d3.json
即可。
如果数据已经加载到浏览器中,那么您可以删除此功能并运行:
var experiments = JSON.parse(json_object) //if json_object is still a string
var ndx = crossfilter(experiments)
其余代码将相同。
相关文章:
- Node.js使用Series函数(模式?)实现流控制时出现意外结果
- JS-使用Ajax获取文件名
- 基本D3.js:使用数据键
- Angular Js-使用特定键打印数组
- node.js使用monk从数组中按id获取文档
- Angular.js:使用ng repeat创建2个html容器
- 使用history.js使用多个GET参数
- Node.js使用派生两个子进程,然后两个子进程如何相互交换
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- Passport.js:使用主干网访问用户
- 图表.js 2.0 使用货币和千位分隔符格式化 Y 轴
- fabric.js:使用 Image.set() 调整图像大小是否会降低图像质量
- 整页.js使用连续滚动或循环时禁用 moveSectionUp
- 节点.js 使用可写流写入文件时出现 EBADF 错误
- 如何获得pickadate.js使用JAWS屏幕阅读器
- JS使用不同的填充
- 选择2 JS使用Ajax加载远程数据
- 从 Node.JS使用 MailGun 发送 HTML 电子邮件
- 如何让node.js使用CFML风格的#hashed#变量
- 使用主干网.js使用“d”从 ASMX 获取数据