如何用D3.js v3获取Y轴刻度位置？数据点对齐问题求助

在PowerBI中使用D3.js v3构建SVG可视化时，遇到数据点（圆形）和固定水平线无法与对应Y轴刻度对齐的问题：

• 当Y轴有8个刻度点时，线条仅略微偏上；
• 当Y轴只有1-2个刻度点时，偏差极大。

由于Y轴刻度数量会随PowerBI过滤器动态变化，尝试通过SVG高度除以刻度数再取半的方式计算偏移，但效果不佳。相关代码如下：

var margin = {top: 20, right: 250, bottom: 50, left: 50},
    width = pbi.width - margin.left - margin.right,
    height = pbi.height - margin.top - margin.bottom,
    legendleft = pbi.width - margin.right;

var y = d3.scale.ordinal()
     .rangeRoundBands([0, height], barPad, barOuterPad);

var svg = d3.select("#chart")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom + legendleft)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

y.domain(Data.map(function(d) { return d.reportingyear; }));

var YearSize = new Set(yearArray).size  // Gets the number of ticks on the y-axis

svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(0, 6)")
    .call(d3.svg.axis().scale(y).orient("left"));

// Chart the rows
  var publishedRow = svg.append("g").attr("id", "publishedgroup").selectAll(null)
      .data(rowArray)
    .enter();

  publishedRow.append("line")
      .style("stroke", "grey") 
      .style("stroke-width", 1)
      .style("stroke-dasharray", ("2, 2"))
      .attr("x1", function(d) { return 0; })
      .attr("y1", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
      .attr("x2", function(d) { return width; })
      .attr("y2", function(d) { return y(d.entry)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); });


publishedRow.append("circle")
      .attr("cx", function(d) {return x(new Date(d.date))} )
      .attr("cy", function(d) {return y(d.year)+((pbi.height-margin.top-margin.bottom) / (new Set(yearArray).size) / 2); })
      .attr("r", 7)
      .style("fill", function(d, i) { return milestoneMap[d.milestone]; })
      });

请问是否有更简便的实现方法，或我的偏移计算问题出在哪里？

核心问题：偏移计算逻辑错误 #

你手动计算偏移的方式忽略了D3序数比例尺rangeRoundBands自带的间距配置（barPad和barOuterPad），导致刻度数量变化时，实际每个刻度的垂直间距和你计算的(pbi.height-margin.top-margin.bottom)/YearSize不符，尤其是刻度数少的时候，内外边距的影响被放大，偏差就会很明显。

正确的偏移计算方式 #

D3的序数比例尺提供了y.rangeBand()方法，可以直接获取每个刻度对应的带宽（包含内边距但不包含外边距的垂直高度），将这个值除以2就是你需要的垂直偏移量，完全不需要手动计算高度除以刻度数。

修改后的代码如下：

// 替换线条的y1、y2计算
publishedRow.append("line")
    .style("stroke", "grey") 
    .style("stroke-width", 1)
    .style("stroke-dasharray", ("2, 2"))
    .attr("x1", function(d) { return 0; })
    .attr("y1", function(d) { return y(d.entry) + y.rangeBand() / 2; })
    .attr("x2", function(d) { return width; })
    .attr("y2", function(d) { return y(d.entry) + y.rangeBand() / 2; });

// 替换圆形的cy计算
publishedRow.append("circle")
    .attr("cx", function(d) {return x(new Date(d.date))} )
    .attr("cy", function(d) {return y(d.year) + y.rangeBand() / 2; })
    .attr("r", 7)
    .style("fill", function(d, i) { return milestoneMap[d.milestone]; });

额外优化点 #

1. 移除冗余的YearSize变量，不需要再手动计算刻度数量；
2. 检查Y轴的transform="translate(0,6)"是否必要，如果这个偏移是为了对齐刻度，建议统一用y.rangeBand()的偏移逻辑，避免双重偏移导致错位。

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