Question

使用带有d3.js的一个条形图我无法将x轴上的刻度线与条形对齐。

Ticks are bad aligned in center area of X axis

在左右边缘，刻度线正常，但不在中间。这是代码：

var formatDate = d3.time.format("%e %b");
var height = 325;
var xTimeScale = d3.time.scale()
        .domain([new Date(data[0].date), d3.time.day.offset(new Date(data[data.length - 2].date), 1)])
        .range([30, width]);

var xAxis = d3.svg.axis()
        .scale(xTimeScale)
        .orient("bottom")
        .ticks(d3.time.days, .1)
        .tickFormat(formatDate);

chart.append("g")
        .attr("class", "xaxis axis") 
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

chart.selectAll(".xaxis text") 
        .attr("transform", function(d) {return "translate(" + this.getBBox().height * -2 + "," + this.getBBox().height + ")rotate(-45)";});

我错过了什么？提前谢谢。

更新：以下jsFiddle更新了chrtan个建议。我现在的问题是将文本与条形中心对齐而不是左对齐。

Answer 1

从图表的外观来看，你失去了一个酒吧的空间。如果所有的柱子都应该与一个刻度线左对齐，那么你最终的柱子应该在1月31日的刻度线右边。

您可能需要添加2月1日刻度，或者将xTimeScale中的[data.length - 2]更改为域（）中的[data.length - 1]。

然后出于显示目的，您可以删除最后一个刻度轴文本：

d3.select(chart.selectAll(".xaxis text")[0].pop()).remove();

内部selectAll应该获取包含xAxis刻度文本的数组，然后弹出最后一个刻度。然后应该通过外部选择删除最后一个刻度。

Answer 2

d3.js

的自动时间刻度的示例

// set domain for axis
var x_domain = d3.extent(data, function(d) { return new Date(d.date); });
//format date
var  date_format = d3.time.format('%Y %B');

var vis = d3.select("#graph")
    .append("svg:svg")
    .attr('class', 'chart')
    .attr("width", width)
    .attr("height", height);

var yScale = d3.scale.linear()
    .domain([0, d3.max(data, function(d) { return d.data; })]).nice()
    .range([height - padding, padding]); 
var xScale = d3.time.scale()
    .domain(x_domain)
    .range([padding, width - padding]);
// define the y axis
var yAxis = d3.svg.axis()
    .orient("left")
    .scale(yScale);
// define the x axis
var xAxis = d3.svg.axis()
    .orient("bottom")
    .scale(xScale)
    .tickFormat(date_format);
// draw y axis with labels and move in from the size by the amount of padding
vis.append("g")
    .attr("class", "axis")
    .attr("transform", "translate("+padding+",0)")
    .call(yAxis);
// draw x axis with labels and move to the bottom of the chart area
vis.append("g")
    .attr("class", "xaxis axis")
    .attr("transform", "translate(0," + (height - padding) + ")")
    .call(xAxis);

// and set data in graph...

一个很好的例子：http://bl.ocks.org/phoebebright/3061203

无法将刻度与d3.js对齐

2 个答案: