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

Question

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

这里是codesandbox的链接:https://codesandbox.io/s/40mnzk9xv4

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

与 Y 轴的情况类似，我正在绘制也在某个范围内计算的关键字 ID。我正在尝试打印 Y 轴上的所有 KeywordNames 和 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

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

  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 调用，因为它们试图将文本标签转换为数字。