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>