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轴标签向下跳几个像素，在过渡期间它们会重新上升。
新转换的标签（＆＃34; 2015＆＃34;在示例中）不会在转换开始时旋转，但会在转换期间旋转到所需的状态。

实施例： 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稳定过渡期。

使用D3过渡旋转的轴标签

1 个答案: