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>