我正在使用 D3 Js 創建堆積條形圖
當前正在創建的 DOM -
<g class="layer" fill="#ff7f50">
<rect
class="rec"
id="24-May-2022 02:46 PM (EST)"
x="91.14551083591323"
width="106.99690402476782"
y="320"
height="80"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="30-Apr-2022 12:00 AM (EST)"
x="289.28792569659436"
width="106.99690402476782"
y="294.7368421052632"
height="105.26315789473682"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="31-Mar-2022 12:00 AM (EST)"
x="487.4303405572755"
width="106.99690402476782"
y="144"
height="256"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="28-Feb-2022 12:00 AM (EST)"
x="685.5727554179566"
width="106.99690402476782"
y="377.77777777777777"
height="22.22222222222223"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="31-Jan-2022 12:00 AM (EST)"
x="883.7151702786377"
width="106.99690402476782"
y="352"
height="48"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="31-Dec-2021 12:00 AM (EST)"
x="1081.8575851393189"
width="106.99690402476782"
y="361.9047619047619"
height="38.095238095238074"
>
<text x=".." y="..">Some Text</text>
</rect>
</g>
<g class="layer" fill="#FF0000">
<rect
class="rec"
id="24-May-2022 02:46 PM (EST)"
x="91.14551083591323"
width="106.99690402476782"
y="280"
height="40"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="30-Apr-2022 12:00 AM (EST)"
x="289.28792569659436"
width="106.99690402476782"
y="84.21052631578947"
height="210.5263157894737"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="31-Mar-2022 12:00 AM (EST)"
x="487.4303405572755"
width="106.99690402476782"
y="127.99999999999999"
height="16.000000000000014"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="28-Feb-2022 12:00 AM (EST)"
x="685.5727554179566"
width="106.99690402476782"
y="355.55555555555554"
height="22.22222222222223"
>
<text x=".." y="..">Some Text</text>
</rect>
<rect
class="rec"
id="31-Jan-2022 12:00 AM (EST)"
x="883.7151702786377"
width="106.99690402476782"
y="320"
height="32"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="31-Dec-2021 12:00 AM (EST)"
x="1081.8575851393189"
width="106.99690402476782"
y="361.9047619047619"
height="0"
><text x=".." y="..">Some Text</text></rect>
</g>
<g class="layer" fill="#90ee90">
<rect
class="rec"
id="24-May-2022 02:46 PM (EST)"
x="91.14551083591323"
width="106.99690402476782"
y="120.00000000000001"
height="160"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="30-Apr-2022 12:00 AM (EST)"
x="289.28792569659436"
width="106.99690402476782"
y="31.578947368421062"
height="52.6315789473684"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="31-Mar-2022 12:00 AM (EST)"
x="487.4303405572755"
width="106.99690402476782"
y="79.99999999999999"
height="48"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="28-Feb-2022 12:00 AM (EST)"
x="685.5727554179566"
width="106.99690402476782"
y="0"
height="355.55555555555554"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="31-Jan-2022 12:00 AM (EST)"
x="883.7151702786377"
width="106.99690402476782"
y="79.99999999999999"
height="240"
><text x=".." y="..">Some Text</text></rect>
<rect
class="rec"
id="31-Dec-2021 12:00 AM (EST)"
x="1081.8575851393189"
width="106.99690402476782"
y="0"
height="361.9047619047619"
><text x=".." y="..">Some Text</text></rect>
</g>
在這個 DOM 中，當前<text>正在附加到<rect>.
我希望這<text>在外部<rect>和內部<g>
對于每個<rect>都有<text>。每個人都<text>應該出去<rect>，以便將其視為堆疊上的標簽。
我寫的代碼 -
var vLayer = svg
.selectAll(".layer")
.data(layers)
.enter()
.join("g")
.attr("class", "layer")
.attr("fill", (layer) => colors[layer.key])
vLayer.selectAll("rect")
.data((layer) => layer)
.join("rect")
.attr("class", "rec")
.attr("id", (sequence) => sequence.data.name)
.attr(
"x",
(sequence) => x0Scale(sequence.data.name) // x1Scale(sequence.data.type)
)
.attr("width", x0Scale.bandwidth())
.attr("y", (sequence) => yScale(sequence[1]))
.attr("height", (sequence) => yScale(sequence[0]) - yScale(sequence[1]))
vLayer.selectAll("rect")
.append("text")
.style("text-anchor", "middle")
.style("font-size", "26px")
.style("font-family", "poppins_regular")
.style("font-weight", "bold")
.style("fill", "white")
.attr("x", width - x0Scale.bandwidth())
.attr("y", 50)
.text(function (data, i) {
return "some text";
});
uj5u.com熱心網友回復：
無需選擇“rects”并嘗試在之后附加“texts”，您可以簡單地選擇“texts”并將其與已經系結的資料連接起來，類似于附加“rects”時所做的操作：
// vLayer.selectAll("rect")
// .append("text")
vLayer.selectAll("text")
.data((layer) => layer)
.join("text")
.style("text-anchor", "middle")
.style("font-size", "26px")
.style("font-family", "poppins_regular")
.style("font-weight", "bold")
.style("fill", "white")
.attr("x", width - x0Scale.bandwidth())
.attr("y", 50)
.text(function (data, i) {
return "some text";
});
不確定這是否會完全解決您的問題，尤其是與小組有關的問題。如果您可以提供“圖層”資料集進行驗證，那就太好了。
在旁注中，您的 .svg 似乎包含嵌套的矩形，這是有意的嗎？
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/488306.html
標籤：javascript html jQuery 反应 d3.js
下一篇：放大d3.js時散點圖點不保持值