以编程方式将样式添加到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)
}