Question

我有一个时间序列d3.js图表，我似乎无法正确排列。最初我用：

创建x轴

var x_domain = d3.extent(active_data, function(d) { return d.date; })
var x = d3.time.scale()
    .domain(x_domain)
    .range([bar_width/2, width-bar_width/2]); // stop bars going outside chart

var date_format = d3.time.format("%b %y");
var xAxis = d3.svg.axis()
    .orient("bottom")
    .scale(x)
    .ticks(8)
    .tickFormat(date_format);

// create the xAxis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
   .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-90)");

svg.selectAll(".x text") // some legacy code I had lying around
.attr("transform", function(d) {
    return "translate(" + this.getBBox().height*3 + "," + this.getBBox().height + ")rotate(0)";

然后我会在用户选择日期范围时更新。＆＃34; active_data＆＃34;使用在此更新之前从我的总数据中显示的实际值/日期进行更新。

function update_chart(start){
    /*...update active_data and other stuff...*/

    x.domain(d3.extent(active_data, function(d){return d.date;}))
    .range([bar_width/2, width-bar_width/2]);           

    /*...*/
    var svg = d3.select("body").transition().duration(500);
    svg.select(".x.axis").call(xAxis);
}

还有很多事情要发生，但那些是我遇到麻烦的相关部分。我已经尝试了我能想到的一切，在线搜索，我只是不明白我做错了什么。它产生以下类型的问题：

d3 time scale some ticks on second line

您可以看到日期转到第二行。在某些图表上，当我更新到最低或最大日期时，它会正确绘制，然后正确地绘制所有这些日期。在另一张图表上，它是这样做的：

ticks all over each other

在第二个，我不会改变.ticks（8），所以我不知道为什么会这样做。任何见解将不胜感激。

Answer 1

好的我明白了，而且还有一些错误。

然后，下面给出了一些特殊x位置的日期，但不是所有日期：

// create the xAxis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis)
   .selectAll("text")
    .style("text-anchor", "end")
    .attr("dx", "-.8em")
    .attr("dy", "-.55em")
    .attr("transform", "rotate(-90)");

我把它改为：

    // create the xAxis
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

让更新完成所有工作（让D3弄明白）。日期现在在正确的位置，除了它是垂直而不是水平。我通过删除它来解决这个问题：

svg.selectAll(".x text") // some legacy code I had lying around
    .attr("transform", function(d) {
        return "translate(" + this.getBBox().height*3 + "," + this.getBBox().height + ")rotate(0)";

它运作正常！

D3时标被分成两行

1 个答案: