Question

我正在寻找使用this之类的dc.js热图，但要使用scatter plot中实现的矩形画笔。是否有一种简便的方法来实现此目的，而不必亲自d3-brush来涉猎？

我在文档中找不到关于是否可以开箱即用的任何内容，因此我怀疑没有。默认的行/列/单元格单击效果很好，但在用户矩阵方面，imo效率不高，无法在较大的矩阵中选择单元格。

谢谢！

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

总的来说，这让我感到很惊讶，因为它们采用相同的数据格式，并且具有大多数相同的参数。