dc.js

Question

我想自己使用 dc.js 热图吗？

我在文档中找不到任何关于这是否可能开箱即用的信息，所以我怀疑不会。默认值 row-/column-/cell-clicking 工作得很好，但我认为（就用户努力而言）效率不足以选择更大矩阵中的单元格。

谢谢！

Answer 1

你说得对 - 该功能当前未包含在热图中。

添加它真的很好，但可能有点工作。

与此同时，如果您愿意 fiddle 稍微调整一下参数，您可以使用散点图获得一个不错的近似值，因为它允许您更改点的大小和形状.

我使用了 heatmap filtering example，将 scatterPlot 换成 heatmap，更改了一些参数，得到了一些运行良好的东西：

首先，我们可以设置宽度和高度以适应大小为 15x15 的 "dots"，就像我们在热图示例中所做的那样 - 除非我们使用散点图时会遇到方点：

        .width(12 * 15 + 40)
        .height(27 * 15 + 20)
        .margins({left: 40, top: 0, right: 0, bottom: 20})

边距用于轴文本。

接下来，我们设置 x 域以适应以其值为中心的点：

        .x(d3.scaleLinear().domain([-0.5,11.5]))
        .yAxisPadding(0.5)

（不确定为什么 elasticY 有效，但 elasticX 无效...一次只能挖掘这么多。）

接下来，我们可以将排除半径设置为与正常半径相同，排除点使用灰色：

        .symbol(d3.symbolSquare)
        .excludedSize(15)
        .symbolSize(15)
        .excludedColor('#ccc')

您可以通过几种不同的方式来指示已过滤的内容 in/out - 请查看 the scatterPlot docs for other ideas. For example you could also use excludedOpacity。但我发现热图的不透明度有点令人困惑，因为褪色使它看起来只是具有不同的值，而不是被完全排除。调味！

最后，散点图使用了"real"d3轴，所以需要配置Y轴才能正确显示数字：

            heatmapChart.yAxis().tickFormat(d3.format('.4'))

总的来说，我很惊讶这是多么容易，因为它们采用相同的数据格式并且具有大部分相同的参数。

Example fiddle.

dc.js - 热图的矩形笔刷？

dc.js - rectangular brush for heat map?

javascript

data-visualization

d3.js