Svelte+D3.js开发柱状图时svg内g元素未从(0,0)原点起始问题

问题原因 #

你感知到的g元素偏移是视觉误判，g元素本身没有任何偏移，它的坐标系原点确实和svg左上角的(0,0)重合，出现这个现象的原因有两个：

• 开发者工具中元素的高亮包围盒，是包裹该元素所有子元素的最小矩形，不是g元素本身的坐标范围
• 你给每个rect的x属性额外加了xScale.bandwidth() / 2：scaleBand返回的xScale(d.name)本身就是每个柱形左边缘的正确起始坐标，额外加半份带宽后，所有柱形整体向右偏移了半份带宽的距离，导致g的高亮包围盒从非0的x位置开始，看起来就像g自身有偏移。

修复方案 #

把rect的x属性值改成xScale(d.name)即可，不需要额外加半份带宽：

<rect
  width={xScale.bandwidth()}
  height={innerHeight - yScale(d.amount)}
  x={xScale(d.name)}
  y={yScale(d.amount)}
/>

如果后续要给整个绘图区域加边距偏移，再给g元素加transform="translate({margins.left}, {margins.top})"属性即可。

内容的提问来源于stack exchange，提问作者BlackMath