Почему функция D3 Zoom не работает в Safari? - PullRequest
Новая
       13

Почему функция D3 Zoom не работает в Safari?

0 голосов
/ 19 сентября 2019

При попытке применить масштабирование D3 к SVG, оно работает в браузерах Chrome, но не в Safari, есть ли исправление / обходной путь, который можно применить для этого Code Pen 

(function(){


 d3.select('.container')
   .append('svg')
     .attr('width',500)
     .attr('height',500)
     .attr('x',20)
     .attr('y',20)
     .attr('class','svg')
     .style('background-color','blue');

 d3.select('.svg')
   .append('circle')
     .attr('cx',250)
     .attr('cy',250)
     .style('fill','green')
     .attr('r',50);

 var zoom = d3.zoom()
   .scaleExtent([1, 100])
   .translateExtent([[0,0], [1000, 1000]])
   .extent([[0, 0], [200,200]])
   .on("zoom", zoomed);

 d3.select('.svg').call(zoom);

 function zoomed(){
   var transform = d3.event.transform;
   d3.select('.svg')
     .attr('transform',`translate(${transform.x},${transform.y}) scale(${transform.k})`)
 }

})()

1 Ответ

1 голос
/ 19 сентября 2019

Согласно этому сообщению SO , Safari не поддерживает атрибуты transform для <svg> элементов.Роберт Лонгсон предлагает добавить элемент g и применить преобразование к тому, что я сделал ниже. 

const svg = d3.select('.container')
  .append('svg')
    .attr('class','.svg')
    .attr('width',500)
    .attr('height',500)
    .style('background-color','blue');

const g = svg.append('g')
    .attr('class', 'g')

g.append('circle')
    .attr('cx',250)
    .attr('cy',250)
    .style('fill','green')
    .attr('r',50);

var zoom = d3.zoom()
    .scaleExtent([1, 100])
    .translateExtent([[0,0], [1000, 1000]])
    .extent([[0, 0], [200,200]])
    .on("zoom", function zoomed(){
      g.attr('transform', d3.event.transform);
    });

svg.call(zoom);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div class="container"></div>
...