[英]d3js ticks positioning
我正在尝试在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标签和刻度线?
我修改了我的代码,如下所示:
旧代码
var y = d3.scale.ordinal().rangeRoundBands([self.config.height, 0]);
新密码
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 + ")";
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.