D3轴标签旋转转换不平滑

Question

在我的转换中，一个轴旋转90度，然后标签沿相反方向旋转以保持直立。下面是我想要的一个最简单的例子，除了过渡并不像以前那样流畅。如果仔细观察，您可以在旋转到位之前看到标签移位（平移）。我怎样才能摆脱这种转变？我用拨号rotate和translate无济于事。

（如果你觉得这是不是太糟糕了，我同意，但移位实际上是显著更明显，我由于某种原因，实际的情节。）

更新。罪魁祸首是text-anchor属性在middle和start之间来回切换。由于这些都是离散值，我不能想到在它们之间转换的简单方法。

var width = 170; 
 
var scale = d3.scaleLinear().domain([0, 5]) 
 
    .range([0, width]); 
 

 
var axis = d3.axisBottom() 
 
    .scale(scale) 
 
    .ticks(6); 
 

 
var graph = d3.select('svg').append('g') 
 
    .attr('transform', 'translate(10,10)'); 
 

 
graph.append('g') 
 
    .attr('transform', 'translate(0,' + width + ')') 
 
    .call(axis); 
 

 
var tickLabels = d3.selectAll('text'); 
 

 
var toggle = false; 
 
d3.select('button').on('click', function() { 
 
    toggle = !toggle; 
 
    if (toggle) { 
 
    graph.transition().duration(1000) 
 
     // .attr('transform','rotate(-90)'); 
 
     .attr('transform', 'rotate(-90 ' + (width/2 + 10) + ' ' + (width/2 + 10) + ')'); 
 
    tickLabels.transition().duration(1500).delay(1000) 
 
     .attr("y", 0) 
 
     .attr("x", 9) 
 
     .attr("dy", ".3em") 
 
     .attr("transform", "rotate(90)") 
 
     .style("text-anchor", "start"); 
 
    } else { 
 
    graph.transition().duration(1000) 
 
     .attr('transform', 'rotate(0) translate(10,10)'); 
 
    tickLabels.transition().duration(1500).delay(1000) 
 
     .attr('y', 9) 
 
     .attr('x', 0.5) 
 
     .attr('dy', '0.71em') 
 
     .attr('transform', 'rotate(0)') 
 
     .style('text-anchor', null); 
 
    } 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width='200' height='200'> 
 
</svg> 
 
<div> 
 
    <button>Rotate</button> 
 
</div>

Answer 1

找到了解决办法，这实际上是相当简单的。关键是在旋转标签之前更改x属性以抵消text-anchor班次。结果实际上相当不错。

var width = 170; 
 
var scale = d3.scaleLinear().domain([0, 5]) 
 
    .range([0, width]); 
 

 
var axis = d3.axisBottom() 
 
    .scale(scale) 
 
    .ticks(6); 
 

 
var graph = d3.select('svg').append('g') 
 
    .attr('transform', 'translate(10,10)'); 
 

 
graph.append('g') 
 
    .attr('transform', 'translate(0,' + width + ')') 
 
    .call(axis); 
 

 
var tickLabels = d3.selectAll('text'); 
 

 
var toggle = false; 
 
d3.select('button').on('click', function() { 
 
    toggle = !toggle; 
 
    if (toggle) { 
 
    graph.transition().duration(1000) 
 
     // .attr('transform','rotate(-90)'); 
 
     .attr('transform', 'rotate(-90 ' + (width/2 + 10) + ' ' + (width/2 + 10) + ')'); 
 
    tickLabels.transition().duration(0).delay(1000) 
 
     .attr('x', -3) 
 
     .style("text-anchor", "start") 
 
     .transition().duration(1000) 
 
     .attr("y", 0) 
 
     .attr("x", 9) 
 
     .attr("dy", ".3em") 
 
     .attr("transform", "rotate(90)"); 
 
    } else { 
 
    graph.transition().duration(1000) 
 
     .attr('transform', 'rotate(0) translate(10,10)'); 
 
    tickLabels.transition().duration(0).delay(1000) 
 
     .attr('x', 12) 
 
     .style('text-anchor', null) 
 
     .transition().duration(1000) 
 
     .attr('y', 9) 
 
     .attr('x', 0.5) 
 
     .attr('dy', '0.71em') 
 
     .attr('transform', 'rotate(0)'); 
 

 
    } 
 
});

<script src="https://d3js.org/d3.v4.min.js"></script> 
 
<svg width='200' height='200'> 
 
</svg> 
 
<div> 
 
    <button>Rotate</button> 
 
</div>