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

Question

我正在使用d3制作条形图，并且遇到一个问题，其中rect元素中的x值的行为似乎不同于宽度值，y和height值也是如此。奇怪的是，我将相同的值传递给每个副本。

我正在测试此问题并获得奇怪的结果，如下图所示。请注意，设置范围时，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中的四个点（四个圆）的原因是：矩形的结束位置是其宽度加其{{1} } （初始位置。垂直刻度也是如此。

现在，您已经拥有了：

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;
}