2

Отобразил два круга на различных svg. Хочу чтобы при перемещении/масштабировании одного объекта второй зеркально менялся. В d3 до 3.5.17 версии все работает прекрасно 

<!DOCTYPE html>
<meta charset="utf-8">

<div>
  <svg>
    </svg>
  <svg>
    </svg>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>


<script>
  var parentHandler = function() {


d3.selectAll('svg').each(function() {
  d3.select(this).select('circle').attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
});





};


var zoom = d3.behavior.zoom().on("zoom", parentHandler);
  var svgEvent = d3.selectAll('svg').each(function() {


var svg = d3.select(this)
  .attr("width", 400)
  .attr("height", 200);

var circle = svg
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .style("fill", "#0f0")

svg.call(zoom);



});
</script>

начиная с 4.0.0 версии после перемещения/масштабирования одного круга перехожу на второй, чтобы тоже сделать изменения, то восстанавливаются первоначальные значения трансформации

<!DOCTYPE html>
<meta charset="utf-8">

<div>
  <svg>
    </svg>
  <svg>
    </svg>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>


<script>
  var parentHandler = function() {


d3.selectAll('svg').each(function() {
  d3.select(this).select('circle').attr("transform", d3.event.transform);
});





};
  var zoom = d3.zoom().on("zoom", parentHandler);


var svgEvent = d3.selectAll('svg').each(function() {


var svg = d3.select(this)
  .attr("width", 400)
  .attr("height", 200);

var circle = svg
  .append("circle")
  .attr("cx", 30)
  .attr("cy", 30)
  .attr("r", 20)
  .style("fill", "#0f0")

svg.call(zoom);



});
</script>

Выходит, что для каждого svg используется свой объект трансформации... Как сделать так, чтобы поведение в пятой версии было аналогично поведению в третьей?

kenara
  • 21

0 Answers0