Question

我一直在通过缩放的背景svg处理d3js中的转换。但是，在Safari（10.0.1）中，我发现转换时出现了人工制品。

人工制品切断了示例中的背景圆圈（在Safari中打开第一个小提琴）。

除非我强制使用新的渲染（例如，调整窗口大小），否则这些人工制品仍然存在。

Chrome和Firefox不会显示此问题。

这是一个小例子的小提琴（在Safari中打开）：fiddle with scaling

缩放规范的代码：

var N = 200;
var wh = 600;
var r = 20;

var svg = d3.select('body').append("svg").attr('width',wh).attr('height',wh);
var country = svg.append('g');
country.attr("transform", "scale(" + wh +"," + wh +")");

for(var i = 0; i < N; i++) {
  var cx = Math.random();
  var cy = Math.random();
  country.append("circle")
    .attr("cx", cx)
    .attr("cy", cy)
    .attr("r", r/wh)
    .style('fill',"#ccc");
}

svg.append('circle')
  .attr("cx", 0)
  .attr("cy", 0)
  .transition()
  .duration(500)
  .attr("cx", 0.5*wh)
  .attr("cy", 0.5*wh)
  .attr("r",r*1.5)
  .transition()
  .duration(500)
  .attr("cx", 0)
  .attr("cy", 0);

当我不缩放背景svg时，人工制品不显示：fiddle without scaling

没有缩放的小提琴代码：

var N = 200;
var wh = 600;
var r = 20;
var svg = d3.select('body').append("svg").attr('width',wh).attr('height',wh);
var country = svg.append('g');

for(var i = 0; i < N; i++) {
  var cx = Math.random()*wh;
  var cy = Math.random()*wh;
  country.append("circle")
    .attr("cx", cx)
    .attr("cy", cy)
    .attr("r", r)
    .style('fill',"#ccc");
}

svg.append('circle')
  .attr("cx", 0)
  .attr("cy", 0)
  .transition()
  .duration(500)
  .attr("cx", 0.5*wh)
  .attr("cy", 0.5*wh)
  .attr("r",r*1.5)
  .transition()
  .duration(500)
  .attr("cx", 0)
  .attr("cy", 0);

之前有没有遇到过这个？它有解决方案吗？

通过缩放svg

0 个答案: