使用可用属性而不是范围 D3 React 绘制热图

Question

我正在制作一个热图，它基本上绘制了来自外部 JSON 的 taxID 和关键字名称之间的图表。虽然我能够绘制这些值，但我在图表上看到许多空白区域并且不知道如何使用可用数据绘制它们。

这是 codesandbox 的 link：https://codesandbox.io/s/40mnzk9xv4

在 X 轴上，我绘制了在给定范围内计算的 TaxID。我确实尝试使用 rangeBands() 函数，但每次都会出错。

它与 Y 轴的情况类似，我正在绘制也在一定范围内计算的关键字 ID。我正在尝试打印 Y 轴上的所有关键字名称和 X 轴上的所有 taxID，并在图表上绘制它们相应的光谱计数。

请帮我看看哪里错了。

我正在寻找的输出与此类似：https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99

谢谢。

Answer 1

一些可以帮助您按照自己的方式行事的事情：

首先，您的量表应该使用 scaleBand()，而不是 scaleLinear()，因为它们具有离散的域（即事物的类别，而不是连续的）

其次，您的比例域将数据中 taxId 和 keywordName 的每个值都作为可能值。但是有些值会重复不止一次。您需要过滤它们，以便您只有唯一值。所以你的比例代码应该是：

const xValues = d3.set(data.map(d => d.taxId)).values();
const yValues = d3.set(data.map(d => d.keywordName)).values();
const xScale = d3.scaleBand()
    .range([0, width])
    .domain(xValues); //X-Axis

const yScale = d3.scaleBand()
    .range([0, height])
    .domain(yValues); //Y-Axis

最后，放置热图图块的代码需要调用缩放函数，以便正确计算出每个矩形的位置：

  chart.selectAll('g')
    .data(data).enter().append('g')
    .append('rect')
    .attr('x', d => { return xScale(d.taxId) })
    .attr('y', d => { return yScale(d.keywordName) })

这应该可以帮助您完成大部分工作。您还需要减少 cellSize 并删除轴上的 tickFormat 调用，因为它们试图将您的文本标签转换为数字。

使用可用属性而不是范围 D3 React 绘制热图

Plotting heatmap with available attributes instead of range D3 React

javascript

heatmap

d3.js

reactjs