d3.js 带有自定义形状的轴上的D3额外标记

yrdbyhpb 于 2022-11-12 发布在其他

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

我想在D3中复制这些标签，并在末尾添加一个三角形，以显示最后的数据点。
我能想到的方法是在矩形元素的末尾附加一个三角形，但这很麻烦，因为我必须将三角形与矩形位置对齐。我想知道是否有更好的方法来做到这一点？

1条答案

您可以使用带有填充的path来获得所需的实体形状：

.join("path")
.attr("d", (d, i) => `M ${1} ${yScale(d)} l 6,-6 h 24 v 12 h -24 l -6,-6`)
.attr("fill", (d, i) => d3.schemeTableau10[i])

这比画一个rect然后用螺栓固定在小三角形上要简单。见下图：
第一个