使用 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 起作用了。

問題解決了