Javascript d3js滴答声定位

我正试图在d3.js上开发一个时间线图。如下图所示，我无法将三角形定位在与y轴值相同的方向上。里程碑位于相关的y轴分量的中间。

yaxis起始代码片段：

    var x = d3.time.scale().rangeRound([0, self.config.width]);
    var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]);

    var xAxis = d3.svg.axis().scale(x).orient("bottom").tickSubdivide(4).tickSize(6, 3, 0);//.ticks(d3.time.months,4)
    var yAxis = d3.svg.axis().scale(y).orient("left").tickSize(4);

将y轴附加到svg：

svg.append("g")
          .attr("class", "y axis")
          .call(yAxis);

里程碑的代码片段：

var abs = svg.selectAll(".milestone")
          .data(data)
        .enter().append("g");

        abs.selectAll("symbol")
          .data(function(d) { 
            return d.milestoneList; 
          })
        .enter().append("svg:path")
          .attr("transform", function(d) { 
            return "translate(" + x(d.deadline) + "," + y(d.name) + ")"; 
          })
          .attr("d", d3.svg.symbol().type("triangle-down"));

例如，设置FG55 y轴：

translate（0423）

，尽管设置了FG55的里程碑

translate（，376）

，因此y轴上存在47px的差异

如何正确定位yaxis标签和记号

---

我修改代码如下：

旧代码

新代码

var y = d3.scale.ordinal().rangePoints([self.config.height, 0], 1.5);

---

在D3中使用色带时，刻度将给出色带顶部的位置，而不是中心位置。该比例还提供了标注栏的宽度，可用于计算点应放置的y位置

因此，在上面的代码中，您可以将转换更改为：

.attr("transform", function(d) { 
  var yPosition = y(d.name) + y.bandwidth() / 2;
  return "translate(" + x(d.deadline) + "," + yPosition + ")"; 
})

---

好的，我把rangeroundbands改为rangePoints并修复了。你是说你修复了你的问题吗？你能把它作为答案发布吗？@Anko I更改了var y=d3.scale.ordinal（）.rangeRoundBands（[self.config.height，0]）；变量y=d3.scale.ordinal（）.rangePoints（[self.config.height，0]，1.5）；在我的case@gencay：你能把你的答案作为参考吗？@Larskothoff你可以查看我的答案！

.attr("transform", function(d) { 
  var yPosition = y(d.name) + y.bandwidth() / 2;
  return "translate(" + x(d.deadline) + "," + yPosition + ")"; 
})