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>