Question

大家好，谢谢你的帮助。

这是我的应用程序的摘录，但问题是相同的。我有两个＆＃34; svg＆＃34;，第一个＆＃34; svg＆＃34;是一个视口和第二个＆＃34; svg（#doc）＆＃34;是一个不同元素的容器。我想触发＆＃34;拖放＆＃34;和＆＃34;缩放＆＃34;从我的视口中的任何位置。这个动作改变了＆＃34; svg（#doc）＆＃34;

使用FireFox，效果非常好，但在Chrome中无效。

＆＃13;

var coreSVG = {
  viewport: {
    w: 500,
    h: 500,
  },
  doc: {
    w: 80,
    h: 80,
  },
  transform: {
    x: 0,
    y: 0,
    s: 1,
    print: function() {
      return `translate(${this.x}, ${this.y}), scale(${this.s})`
    }
  },
}


var svg = d3.select('#canvas svg')
  //.attr('preserveAspectRatio', 'xMidYMid slice')
  .attr('width', coreSVG.viewport.w)
  .attr('height', coreSVG.viewport.h)
  .attr('fill', 'red')
  .on('contextmenu', function(d) {
    d3.event.preventDefault();
  });

var doc = svg.append('svg')
  .attr('id', 'doc')
  .attr('viewBox', `0 0 ${coreSVG.doc.w} ${coreSVG.doc.h}`)
  .attr('x', 0)
  .attr('y', 0);

doc.append('rect')
  .attr('x', 0)
  .attr('y', 0)
  .attr('fill', 'blue')
  .attr('width', coreSVG.doc.w)
  .attr('height', coreSVG.doc.h)
  .attr('vector-effect', 'non-scaling-stroke')
  .attr('stroke', 'black')
  .attr('stroke-width', 1)

svg.call(d3.drag()
  .on('start', function() {
  console.log('start drag');
    svg.style('cursor', 'grabbing');

  })
  .on('drag', function() {
    coreSVG.transform.x = (coreSVG.transform.x += d3.event.dx);
    coreSVG.transform.y = (coreSVG.transform.y += d3.event.dy);
    doc.attr('transform', coreSVG.transform.print());
  })
  .on('end', function() {
    console.log('end drag');
    svg.style('cursor', 'default');

  })
  .filter(['touchstart'])
);

svg.call(d3.zoom()
  .scaleExtent([0.9, 3])
  .on('zoom', function() {
    coreSVG.transform.s = d3.event.transform.k;
    doc.attr('transform', coreSVG.transform.print());
  }));

＆＃13;

<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="canvas">
  <svg></svg>
</div>

＆＃13;

d3.drag＆amp; d3.zoom没有在chrome中激活，但在FireFox中工作

0 个答案: