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

Question

我正在研究热图，它基本上绘制了来自外部JSON的taxID和KeywordNames之间的图形。 虽然我能够绘制值，但我在图表上看到了很多空白区域，并且无法用可用数据绘制它们。

这是codeandbox的链接： 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

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

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