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

Question

我正在尝试 d3.js 与 svelte，并开始制作一个简单的条形图，但我遇到了一个我无法弄清楚的问题。问题是，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) 开始，但它在 g 元素上没有任何 transform 属性的情况下发生了 x 位移。当我尝试适当地移动组元素以稍后添加轴时，这会搞砸。我的问题是：为什么会有初始转变？

这是屏幕上出现的svg 和g 元素

Answer 1

您的g 未翻译，g 的边界仅反映其内容的边界。如果内容不以 [0,0] 点为界，g 也不会以 [0,0] 点为界。

目测，我会说最左边的条形限制，因此g，大约是 SVG 边缘带宽的一半。如果我们看看你是如何定位条形的，那是有道理的：

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

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