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

虽然现在我有两个问题：

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

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

Answer 1

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

这个更新的小提琴可能会帮助你：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 在整个过渡过程中保持稳定。