d3js 刻度定位答案

【问题标题】：d3js ticks positioningd3js 刻度定位
【发布时间】：2013-01-27 00:44:19
【问题描述】：

我正在尝试在 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(0,423) 虽然 FG55 的里程碑设置为 translate(<xValue for each>,376)，所以 y 上有 47px 的差异

如何正确定位 yaxis 标签和刻度？

【问题讨论】：

好的，我将 rangeroundbands 更改为 rangePoints 并修复了。
你的意思是你解决了你的问题吗？您可以将其发布为答案吗？
@Anko 我改变了 var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]); with var y = d3.scale.ordinal().rangePoints([self.config.height, 0], 1.5);就我而言
@gencay：您能否发布您的解决方案作为参考答案？
@LarsKotthoff 你可以查看我的答案！

标签： javascript html d3.js timeline

【解决方案1】：

我修改了我的代码如下：

旧代码

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

新代码

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

【讨论】：

【解决方案2】：

在 D3 中使用波段时，比例尺将为您提供波段顶部的位置，而不是中心。该比例还为您提供带的宽度，您可以使用它来计算应放置点的 y 位置。

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

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

【讨论】：