D3轴标签旋转过渡不平滑答案

【问题标题】：D3 axis label rotate transition not smoothD3轴标签旋转过渡不平滑
【发布时间】：2016-09-15 03:24:40
【问题描述】：

在我的过渡中，轴旋转 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>

【问题讨论】：

标签： javascript d3.js svg transition

【解决方案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>

【讨论】：