0

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

记号在 X 轴的中心区域对齐错误

在左右边缘，蜱虫还可以，但在中间不行。这是代码：

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)";});

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

更新：这里是更新了chrtan建议的jsFiddle。我现在的问题是将文本与栏的中心对齐，而不是在左侧。

4

2 回答 2

0

使用 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

于 2014-07-08T10:01:15.803 回答
0

从您的图表的外观来看，您失去了一个酒吧的空间。如果所有的柱都应该与分时左对齐，那么您拥有的最后一个柱应该在 1 月 31 日分时的右侧。

您可能需要通过将 xTimeScale 的 domain() 中的 [data.length - 2] 更改为 [data.length - 1] 来添加 2 月 1 日的刻度。

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

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

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

于 2013-04-10T19:07:18.327 回答