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

Posted 2023-03-28

【中文标题】g 组元素不是从 svg 内的 0,0 开始

【英文标题】：g group element doesn't start at 0,0 inside the svg

【发布时间】：2022-01-09 11:15:27

【问题描述】：

我正在尝试 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 元素

【参考方案1】：

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

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

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

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

【讨论】：

你是对的。我已经有一段时间没有使用 d3 了，我记得使用 +xScale.bandwidth()/2 作为 x 属性，但现在我知道标签将它们定位在条的中心，而不是条本身.删除它解决了问题。谢谢