我正在嘗試 d3.js 和 svelte，我開始做一個簡單的條形圖，但我面臨一個我無法弄清楚的問題。問題是，元素g內svg包含條形的組元素最初從svg元素的原點（左上角）偏移。這是代碼
<script>
import * as d3 from 'd3';
let data = [
{ name: 'Apple', amount: 20 },
{ name: 'Orange', amount: 80 },
{ name: 'Banana', amount: 50 },
{ name: 'Grapes', amount: 10 },
];
let width = 600;
let height = 400;
let margins = { top: 20, right: 20, bottom: 100, left: 100 };
let innerWidth = width - margins.left - margins.right;
let innerHeight = height - margins.top - margins.bottom;
const xScale = d3
.scaleBand()
.domain(data.map((d) => d.name))
.range([0, innerWidth])
.paddingInner(0.1);
const yScale = d3
.scaleLinear()
.domain([0, d3.max(data, (d) => d.amount)])
.range([innerHeight, 0]);
</script>
<div class="canvas">
<svg {width} {height}>
<g>
{#each data as d}
<rect
width={xScale.bandwidth()}
height={innerHeight - yScale(d.amount)}
x={xScale(d.name) xScale.bandwidth() / 2}
y={yScale(d.amount)}
/>
{/each}
</g>
</svg>
</div>
<style>
.canvas {
margin-top: 100px;
width: 600px;
height: 400px;
background-color: #fff;
}
</style>
我期待族元素g，開始在(0,0)中的svg元素（左上角），但沒有任何它的X移transform上屬性g的元素。當我嘗試適當地移動組元素以稍后添加軸時，這將事情搞砸了。我的問題是：為什么會有初始轉變？
這是出現在螢屏上的svg和g元素
uj5u.com熱心網友回復：
您g的不翻譯，其邊界g僅反映其內容的邊界。如果內容不受 [0,0] 處的點的限制，則g也不會受 [0,0] 處的點的限制。
仔細觀察，我會說條形的最左側限制，因此g，大約是 SVG 邊緣帶寬的一半。如果我們看看你如何定位條形，這是有道理的：
x={xScale(d.name) xScale.bandwidth() / 2}
盡管第一個條的縮放值為 0，但矩形仍被輕推了一半的帶寬。的放置g僅反映條形的放置，而不是變換。
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/372300.html
標籤：javascript svg d3.js 苗条的
上一篇：控制鏈接是否可點擊
下一篇：如何更改SVG中的背景顏色？