我正在嘗試使用 treemap-squarify 庫為某些資料生成樹狀圖。一切正常，除了當我嘗試在每個矩形頂部放置一些文本時，文本無法顯示。但是，如果我將生成的 SVG 輸出復制/粘貼到 html 正文中并在瀏覽器中打開，則文本顯示正常。我究竟做錯了什么？謝謝
<html>
<head>
<style>
#something{
width: 750px;
}
</style>
</head>
<body>
<div id="something">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" preserveAspectRatio="xMinYMin meet">
</svg>
</div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/lib/bundle.min.js"></script>
<script>
const result = Treemap.getTreemap({
data: [
{ value: 18, color: 'red' },
{ value: 7, color: 'pink' },
{ value: 4, color: 'blue' },
{ value: 1, color: 'orange' },
{ value: 5, color: 'green' },
{ value: 9, color: 'grey' },
],
width: 900,
height: 600,
});
console.log(result);
// lets create some SVG
const svg = document.querySelector("svg");
for(let i = 0; i < result.length; i ){
// create group
let newG = document.createElementNS("http://www.w3.org/2000/svg", "g");
// create rectangle
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", result[i].x);
rect.setAttribute("y", result[i].y);
rect.setAttribute("width", result[i].width);
rect.setAttribute("height", result[i].height);
rect.setAttribute("fill", result[i].data.color);
// create text node
let text = document.createElement("text");
text.setAttribute("x", result[i].x (result[i].width/2));
text.setAttribute("y", result[i].y (result[i].height/2));
text.setAttribute("fill", "white");
text.setAttribute("font-family", "Verdana");
text.setAttribute("font-size", "12");
let textNode = document.createTextNode(result[i].data.value);
text.appendChild(textNode);
newG.appendChild(rect);
newG.appendChild(text);
svg.appendChild(newG);
}
</script>
</body>
</html>
uj5u.com熱心網友回復：
和 with 一樣g，rect你也需要使用createElementNSfor text。
const result = Treemap.getTreemap({
data: [{
value: 18,
color: 'red'
},
{
value: 7,
color: 'pink'
},
{
value: 4,
color: 'blue'
},
{
value: 1,
color: 'orange'
},
{
value: 5,
color: 'green'
},
{
value: 9,
color: 'grey'
},
],
width: 900,
height: 600,
});
console.log(result);
// lets create some SVG
const svg = document.querySelector("svg");
for (let i = 0; i < result.length; i ) {
// create group
let newG = document.createElementNS("http://www.w3.org/2000/svg", "g");
// create rectangle
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", result[i].x);
rect.setAttribute("y", result[i].y);
rect.setAttribute("width", result[i].width);
rect.setAttribute("height", result[i].height);
rect.setAttribute("fill", result[i].data.color);
// create text node
// Change here to createElementNS
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
text.setAttribute("x", result[i].x (result[i].width / 2));
text.setAttribute("y", result[i].y (result[i].height / 2));
text.setAttribute("fill", "white");
text.setAttribute("font-family", "Verdana");
text.setAttribute("font-size", "12");
let textNode = document.createTextNode(result[i].data.value);
text.appendChild(textNode);
newG.appendChild(rect);
newG.appendChild(text);
svg.appendChild(newG);
}#something {
width: 750px;
}<script src="https://unpkg.com/[email protected]/lib/bundle.min.js"></script>
<div id="something">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" preserveAspectRatio="xMinYMin meet">
</svg>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/488893.html
標籤：javascript svg