如何在d3热图中的行/列周围添加边框？

jdg4fx2g 于 2023-06-06 发布在其他

关注(0)|答案(1)|浏览(121)

我想按以下方式在行周围添加边框（悬停的单元格有自己的描边）：

但是，我只能做到这一点：

为了创建热图，我使用了https://d3-graph-gallery.com/graph/heatmap_basic.html网页中的示例代码。
以下是我当前添加笔划的方式：

svg_heatmap.selectAll("rect")
            .style("stroke", "none")
            .filter(d => d.group == this.__data__.group || d.variable == this.__data__.variable)
            .style("stroke", "black")

我试过用stroke-dasharray，但没有用。我有点难住了。

d3.js

来源：https://stackoverflow.com/questions/74658460/how-to-add-a-border-around-a-row-column-in-a-d3-heatmap

1条答案

按热度按时间

bwitn5fc1#

你可以为每一行/列添加一个额外的rect。
基于https://d3-graph-gallery.com/graph/heatmap_basic.html网页中的示例代码，您可以尝试执行以下操作。

svg.selectAll()
      .data(myVars)
      .enter()
      .append("rect")
      .attr("y", d => y(d))
      .attr("x", x("A"))
      .attr("width", (x.step()) * myGroups.length)
      .attr("height", y.bandwidth())
      .style("fill", "none")
      .style("stroke", "black")

赞(0）回复(0）举报 2023-06-06

我来回答

如何在d3热图中的行/列周围添加边框？

1条答案

相关问题

热门标签

最新问答