使用 d3.js 查找 y 轴刻度的位置

Question

我正在使用 d3.js（在 PowerBI 中 - 因此是 d3 的第 3 版）构建一个 SVG 可视化，并且我正在努力将我的数据点和固定线与适当的 y 轴刻度标记对齐。

比如8个轴点，线条几乎是对的，只是稍微偏上一点

但是当只有 1 或 2 点时，它就差了

我正在尝试动态计算偏移量，因为 y 轴刻度数将取决于我拥有的 PowerBI 过滤器。

我目前的计算是，我将 svg 的高度除以滴答数，然后将其除以二，使其落在中心。 y 轴是有序的。

相关代码是：

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

.attr行具有动态计算偏移量的代码。

有没有更简单的方法来做到这一点？ 或者我可以得到一些关于为什么我的计算不起作用的建议吗？

谢谢！

Answer 1

我应该使用.rangePoints而不是.rangeRoundBands

然后 static 偏移量 6 起作用了。

问题解决了