dc.js - 热图的矩形画笔？答案

【问题标题】：dc.js - rectangular brush for heat map?dc.js - 热图的矩形画笔？
【发布时间】：2018-07-01 11:05:00
【问题描述】：

我希望使用像 this 这样的 dc.js 热图，但使用像在 scatter plot 中实现的矩形画笔。有没有一种简单（-ish）的方法来实现这一点，而不必自己涉足d3-brush？

我在文档中找不到任何关于这是否可以开箱即用的信息，所以我怀疑不是。默认的行/列/单元格单击效果很好，但 imo 效率不高（在用户工作方面）不足以在更大的矩阵中选择单元格。

谢谢！

【问题讨论】：

【解决方案1】：

您是对的 - 该功能目前不包含在热图中。

添加它会非常好，但它可能需要一些工作。

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

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

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

        .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')

您可以通过几种不同的方式指示已过滤入/出的内容 - 请查看 the scatterPlot docs 了解其他想法。例如，您也可以使用excludedOpacity。但是我发现热图的不透明度有点令人困惑，因为褪色使它看起来只是具有不同的值，而不是完全被排除在外。调味！

最后，散点图使用“真实”d3轴，所以需要配置Y轴才能正确显示数字：

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

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

【讨论】：