我想在 D3 的末尾用三角形復制這些標簽，以顯示最后的資料點。
我能想到的方法是在 rect 元素的末尾附加一個三角形，但是非常混亂，因為我必須將三角形與矩形位置對齊。我想知道是否有更好的方法來做到這一點？
uj5u.com熱心網友回復：
您可以使用path帶有填充的 a 來獲得您正在尋找的物體形狀：
.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然后用螺栓固定在小三角形上要簡單。見下文：
const width = 200;
const height = 180;
const svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
const yScale = d3.scaleLinear().domain([0, 1]).range([160, 10]);
const yAxis = d3.axisLeft(yScale);
const yAxisG = svg.append("g").attr("transform", `translate(60, 10)`).call(yAxis);
const markerY = [0.25, 0.45, 0.65];
const markers = yAxisG.selectAll(".marker")
.data(markerY)
.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])
const labels = yAxisG.selectAll(".label")
.data(markerY)
.join("text")
.text(d => d)
.attr("x", 0)
.attr("y", d => yScale(d))
.attr("dx", 8)
.attr("dy", 4)
.attr("text-anchor", "start")
.attr("fill", "#000");<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529617.html
上一篇：使用vueCLI構建的應用程式可以完美運行，但是使用webpack構建時似乎可以作業，但不會呼叫組件函式
下一篇：將標題文本添加到d3中的路徑中心