以編程方式將樣式添加到D3熱圖的列

Question

從這里我有一個基本的熱圖。

現在，我希望能夠突出顯示繪圖的整個列，例如在所有值周圍繪制一個矩形（也可以更簡單一些）：

我還使用react來跟蹤應突出顯示的列。 因此，我需要能夠以編程方式更改此突出顯示，而無需任何鼠標操作。

有誰知道如何在不使用鼠標事件的情況下為整個列設置樣式？ 那有可能嗎？

Answer 1

您可以在創建熱圖時附加突出顯示元素，並在變量更改時更新突出顯示元素的位置/不透明度。

請注意，您還需要將d3比例函數存儲在變量中。

const svg = "however you're selecting the svg here"

svg.append('rect')
    .attr("id", "highlight")
    .attr("width", xScale.bandwidth())
    .attr("height", 'height of the heatmap')
    .attr("x", 0)
    .attr("y", 0)
    .attr("opacity", 0)
    .attr("stroke", '#ffffff')
    .attr("stroke-width", 2)

以編程方式更改變量時，請使用d3選擇該元素並更新其位置

function changePosition(column) {
    const svg = "however you're selecting the svg here"
    const xScale = "that variable where you put the xScale function when you appended your heatmap"

    svg.select("#highlight")
        .attr("x", xScale(column))
        .attr("opacity", 1)
}