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

Question

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

javascriptreactjsd3.jsheatmap

3

我正在制作一个热力图，它基本上绘制了外部JSON中的taxIDs和KeywordNames之间的图形。虽然我能够绘制出值，但是在图表上看到很多空白区域，不知道如何使用现有数据绘制它们。

这是codesandbox的链接：https://codesandbox.io/s/40mnzk9xv4 在X轴上，我正在绘制计算在给定范围内的TaxIDs。我尝试使用rangeBands()函数，但每次都会出现错误。

在Y轴上也是同样的情况，我正在绘制计算在范围内的关键字ID。我正在尝试在Y轴上打印所有KeywordNames，在X轴上打印所有taxIDs，并绘制它们对应的spectracount。

请帮助我找出问题所在。

我想要的输出类似于这个： https://bl.ocks.org/Bl3f/cdb5ad854b376765fa99 谢谢。

- neeru neeraja

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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