使用可用屬性而不是范圍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調用，因為他們試圖將文本標簽轉換為數字。