使用 D3 转换旋转轴标签

Question

我正在尝试创建一个图表，该图表会随着新值的进入而更新。为了使 X 轴上的标签可读，我决定稍微旋转它们，这样它们就不会重叠。

当有新值时，它被绘制在图表中，然后路径（实际上是容器）在过渡中平移到左侧。

这就是我创建旋转轴标签的方式：

    svg.select(".x.axis")
        .call(this.xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

this.axislabelrotation 是：

function(d) {
    return "rotate(-35)" 
}

这就是我转换 X 轴的方式：

    svg = svg.transition().duration(750);
    svg.select(".x.axis") // change the x axis
        .call(this.xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

尽管现在我有两个问题：

在过渡开始时，X 轴标签跳下几个像素，在过渡期间它们会返回。
新输入的标签（示例中的“2015”）不会在过渡开始时旋转，但会在过渡期间旋转到所需状态。

示例： http://jsfiddle.net/esy6wk8n/2/

Answer 1

我建议您删除 dy 和 transform 属性的转换。

更新后的 fiddle 可能会对您有所帮助：http://jsfiddle.net/esy6wk8n/4/

所有更改都在您的 update 函数中。

    var no_trans = svg;
    svg = svg.transition().duration(750);

    lp.transition()
        .duration(750)
        .attr("transform", "translate(" + this.x(data[0].jdate) + ")");

    lu.transition()
        .duration(750)
        .attr("transform", "translate(" + this.x(data[0].jdate) + ")");

    svg.select(".x.axis") // change the x axis
        .call(this.xAxis)
        .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "-.8em");
            //.attr("dy", ".15em")
            //.attr("transform", this.axislabelrotation);

    no_trans.select(".x.axis")
        .selectAll("text")
            .attr("dy", ".15em")
            .attr("transform", this.axislabelrotation);

基本上，我已将 dy 和 transform 属性的更新移出过渡，因此这些值将立即设置，不会作为过渡的一部分进行更改，在整个过渡过程中保持 dy 和 transform 稳定。

使用 D3 转换旋转轴标签

transitioning rotated axis labels with D3

d3.js

transition

axis-labels