时间戳

首页 > 解决方案 > dc.js - 热图的矩形画笔？

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

问题描述

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

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

谢谢！

标签： javascriptd3.jsdata-visualizationdc.js

解决方案

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

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

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

我采用了热图过滤示例，将 a 替换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')

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

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

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

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

示例小提琴。

推荐阅读