g 组元素不是从 0,0 开始的 svg

Question

我正在尝试使用 svelte d3.js，我开始制作一个简单的条形图，但我遇到了一个我无法弄清楚的问题。问题是，svg 元素内包含条形的组元素 g 最初从 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 从 svg 元素（左上角）的 (0,0) 开始，但它没有任何 transform g 元素上的属性。当我尝试适当地移动组元素以便稍后添加轴时，这会把事情搞砸。我的问题是：为什么会有初始偏移？

这是屏幕上显示的 svg 和 g 元素

Answer 1

您的 g 未翻译，g 的范围仅反映其内容的范围。如果内容不受 [0,0] 处的点限制，则 g 也不会受到 [0,0] 处的点限制。

仔细观察，我会说条形的最左边限制，因此 g 大约是 SVG 边缘带宽的一半。如果我们看看您如何放置条形图，那是有道理的：

 x={xScale(d.name) + xScale.bandwidth() / 2}

尽管第一个条形的缩放值为 0，但矩形被微移了一半的带宽。 g 的位置仅反映条形的位置，而不是转换。

g 组元素不是从 0,0 开始的 svg

g group element doesn't start at 0,0 inside the svg

javascript

svg

d3.js

svelte