x/y 和宽度/高度之间的线性比例不一致

Question

我正在使用 d3 制作条形图，但遇到了一个问题：rect 元素中的 x 值似乎与宽度值不同，同样适用于 y 和高度值。奇怪的是，我将相同的值传递给每个对应方。

我正在测试这个问题并得到奇怪的结果，如下图所示。请注意，在设置范围时 yScale 正在反转。我的期望是矩形的四个角应该接触四个圆，但事实并非如此。这种行为有什么原因吗？

图片：

我的代码：

const xMax = dataset.length-1;
const yMax = d3.max(dataset, (d)=> d[1]);

const xScale = d3.scaleLinear()
                 .domain([0, xMax])
                 .range([padding, width-padding]);
const yScale = d3.scaleLinear()
                 .domain([0, yMax])
                 .range([height-padding,padding]);


svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('rect')
  .style('fill', 'none')
  .style('stroke', 'black')
  .style('stroke-width', 2)
  .attr('x', xScale(0))
  .attr('y', yScale(yMax))
  .attr('width', xScale(xMax))
  .attr('height', yScale(yMax));

Answer 1

矩形没有到达 SVG 中的四个点（四个圆）的原因是：矩形的结束位置是它的宽度 加上 x (初始位置。垂直刻度也是如此。

现在，你有这个：

const svg = d3.select("svg");
const xMax = 280,
  yMax = 130,
  padding = 20,
  width = 300,
  height = 150;

const xScale = d3.scaleLinear()
  .domain([0, xMax])
  .range([padding, width - padding]);
const yScale = d3.scaleLinear()
  .domain([0, yMax])
  .range([height - padding, padding]);

svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('rect')
  .style('fill', 'none')
  .style('stroke', 'black')
  .style('stroke-width', 2)
  .attr('x', xScale(0))
  .attr('y', yScale(yMax))
  .attr('width', xScale(xMax))
  .attr('height', yScale(yMax));

svg {
  background-color: wheat;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>

那么，如果右侧的圆圈位于xScale(xMax)，为什么矩形不结束于右侧的圆圈？因为你必须从宽度中减去矩形的x 位置，才能得到这个：

rectangle's x + rectangle's width = circle's centre

而且，如前所述，矩形的高度也是如此。

话虽如此，这是工作演示：

const svg = d3.select("svg");
const xMax = 280,
  yMax = 130,
  padding = 20,
  width = 300,
  height = 150;

const xScale = d3.scaleLinear()
  .domain([0, xMax])
  .range([padding, width - padding]);
const yScale = d3.scaleLinear()
  .domain([0, yMax])
  .range([height - padding, padding]);

svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(0))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(xMax))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('circle')
  .attr('cx', xScale(0))
  .attr('cy', yScale(yMax))
  .attr('r', 10);
svg.append('rect')
  .style('fill', 'none')
  .style('stroke', 'black')
  .style('stroke-width', 2)
  .attr('x', xScale(0))
  .attr('y', yScale(yMax))
  .attr('width', xScale(xMax) - xScale(0))
  .attr('height', yScale(0) - yScale(yMax));

svg {
  background-color: wheat;
}

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg></svg>