javascript - 如何在不重置刻度文本属性的情况下转换 D3 轴？

Question

我有一个 D3 项目，我在其中沿屏幕左侧绘制时间轴。我想让它在窗口调整大小时平滑过渡，所以我使用 D3 过渡。然而，轴设置似乎正在改变刻度标签上的“dy”属性，立即导致刻度标签向下跳，然后在 SVG 转换时转换回它们的正常位置。有没有办法将刻度文本的“dy”属性设置为轴调用的一部分或更好的过渡方式？

我的初始(一次性)轴设置:

var timeScale = d3.time.scale().domain([minTime, maxTime]);
var yAxis = d3.svg.axis().scale(timeScale).tickFormat(d3.time.format("%-m/%-d %-I:%M%p")).orient("right");

我有一个功能可以更新/转换我正在使用的 SVG 元素。第一次绘制 SVG init 设置为 true，之后设置为 false。

function updateSVG(init) {        
    ...
    timeScale.rangeRound([topPadding, svgHeight]);
    // Use a transition to update the axis if this is an update
    var t = (init) ? svgContainer : svgContainer.transition().duration(750);
    // {1}: Create Y axis
    t.select("g.axis").call(yAxis);
    // {2}: Move Y axis labels to the left side
    t.selectAll("g.tick > text")
        .attr("x", 4)
        .attr("dy", -4);
    ...
}

在 {1} 的更新中，刻度标签都具有来自先前 attr() 调用的“-4”的“dy”属性。在 {2} 处，应用轴将这些元素的“dy”属性重置为默认值“.32em”，之后它们缓慢过渡回“-4”，导致它们随着窗口大小和轴的调整而上下抖动被重新绘制。

这是一个有效的 JSFiddle，它演示了在调整结果框大小时在 y 轴上的跳转，仅调整几个像素，应该很明显:http://jsfiddle.net/YkDk4/1/

Answer 1

刚刚弄明白了。通过应用“transform”属性而不是“dy”属性，axis call() 不会覆盖该值。所以:

t.selectAll("g.tick > text")
    .attr("x", 4)
    .attr("dy", -4);

变成:

t.selectAll("g.tick > text")
    .attr("x", 4)
    .attr("transform", "translate(0,-4)");

一切都顺利过渡。