我正在尝试在 d3.js 上开发一个时间线图表。正如您将在下图中看到的,我无法将三 Angular 形定位在与 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 标签和刻度?
最佳答案
我修改了我的代码如下:
旧代码
var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]);
新代码
var y = d3.scale.ordinal().rangePoints([self.config.height, 0], 1.5);
关于javascript - d3js 刻度定位,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14543231/