как получить полное вращение по часовой стрелке в D3 - PullRequest
Новая
       43

как получить полное вращение по часовой стрелке в D3

0 голосов
/ 01 января 2019

Я хочу, чтобы квадрат выполнил полный оборот по часовой стрелке после паузы на половине вращения.Следующий код заставляет его делать половину вращения по часовой стрелке, а другую половину против часовой стрелки, вопреки тому, что я ожидаю.

var svg = d3.select('svg');

var s = svg.append("rect")
  .attr("width", 50)
  .attr("height", 50)
  .attr("x", -25)
  .attr("y", -25)
  .attr("fill", "red")
  .attr("transform", "translate(100,100)");

s
  .transition()
  .duration(1000)
  .attr("transform", "translate(100,100) rotate(180)")
  .transition()
  .delay(1000)
  .duration(1000)
  .attr("transform", "translate(100,100) rotate(360)");
* {
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  background: #ffd;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

Я могу взломать такой код, разбив вторую половину вращения на две четверти вращения по часовой стрелке, но я хотел бы знать, есть ли более элегантное решение.

Ответы [ 2 ]

0 голосов
/ 02 января 2019

Виновником здесь является сам D3, а не какая-либо спецификация SVG.

Проблема в том, что ваш переход использует d3.interpolateTransform, как мы видим здесь : 

var fullname = namespace(name), i = fullname === "transform" ? interpolateTransform : interpolate;

Это исходный код v4, а не v3, но принцип тот же, что и в действительном коде v3: 

var interpolate = nameNS == "transform" ? d3_interpolateTransform : d3_interpolate, name = d3.ns.qualify(nameNS);

Тогда, если мы посмотрим в исходном коде interpolateTransform (опять v4, но v3 почти такой же), мы увидим, что он использует функцию с именем parseSvg, которая вычисляет матрицу для нового преобразования: 

function parseSvg(value) {
  if (value == null) return identity;
  if (!svgNode) svgNode = document.createElementNS("http://www.w3.org/2000/svg", "g");
  svgNode.setAttribute("transform", value);
  if (!(value = svgNode.transform.baseVal.consolidate())) return identity;
  value = value.matrix;
  return decompose(value.a, value.b, value.c, value.d, value.e, value.f);
}

Эта функция генерирует 0 как конечное значение в матрице, когда вы передаете ей rotate(360) (фактическое значение равно -2.4492935982947064e-16, что практически равно нулю).

Решение

Здесь есть несколько возможных решений, самое простое из которых - interpolateString вместо interpolateTransform.

Кроме того, поскольку ваш код использует D3 v3, вы можете воспользоваться d3.transform(), который был удален в v4 / v5: 

d3.interpolateString(d3.transform(d3.select(this).attr("transform")), "translate(100,100) rotate(360)")

Вот ваш код с этим изменением: 

var svg = d3.select('svg');

var s = svg.append("rect")
  .attr("width", 50)
  .attr("height", 50)
  .attr("x", -25)
  .attr("y", -25)
  .attr("fill", "red")
  .attr("transform", "translate(100,100)");

s.transition()
  .duration(1000)
  .attr("transform", "translate(100,100) rotate(180)")
  .transition()
  .delay(1000)
  .duration(1000)
  .attrTween("transform", function() {
    return d3.interpolateString(d3.transform(d3.select(this).attr("transform")), "translate(100,100) rotate(360)")
  });
<svg></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
0 голосов
/ 02 января 2019

Если я использую D3v3, он не поворачивается на 180 градусов, если я переключаюсь на D3v4, он поворачивается на 180.

Вы можете интерполировать до 359,99.Он не следует за строковым интерполятором из документов, потому что вы также получаете scale() в преобразовании. 

translate(100, 100) rotate(359.989990234375) scale(0.999,0.999)

Этого не произойдет, если вы напишите свой собственный интерполятор. 

var svg = d3.select('svg');

var s=svg.append("rect")
.attr("width",50)
.attr("height",50)
.attr("x",-25)
.attr("y",-25)
.attr("fill","red")
.attr("transform","translate(100,100) rotate(0)");

s
.transition()
.duration(3000)
.ease(d3.easeLinear)
.attr("transform","translate(100,100) rotate(180)")
.transition()
.delay(2000)
.duration(3000)
.ease(d3.easeLinear)
.attrTween("transform", () => d3.interpolate("translate(100,100) rotate(180)", "translate(100,100) rotate(360)") );
<script src="https://d3js.org/d3.v5.min.js"></script>

<svg></svg>
...