Javascript 缩放svg上d3转换的Safari错误

我一直在研究d3js在缩放背景svg上的转换。然而，在Safari（10.0.1）中，我看到了在转换发生时出现的人工制品

在这个例子中，人工制品切断了背景圆圈（在Safari中打开first fiddle）

除非强制进行新渲染（例如，调整窗口大小），否则这些人工制品将保留

Chrome和Firefox没有显示这个问题

下面是一个小例子的提琴（在Safari中打开）：

代码在处理缩放：

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);

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（“转换”、“比例”（+wh+）、“+wh+”）；
对于（变量i=0；i

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

在不缩放的情况下使用FIDLE编写代码：

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);

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'）；
对于（变量i=0；i

---

以前有人遇到过这种情况吗？有解决方法吗？

报告一个webkit错误。我会这样做。但我希望有一个解决这个问题的办法，因为我们（现在）遇到了这个问题。你找到Thijs的解决方案了吗？Safari很酷，可以设置属性“height”和“width”，而不设置特定的单位，比如“px”？