Предотвращение "призрачных" изображений при перетаскивании в d3.js

Question

У кого-нибудь есть веская причина, почему я вижу призраки, когда перетаскиваю фигуры вокруг холста с помощью d3.js? Пример скриншота:

Вот код (coffeescript, который я считаю намного легче читать и писать):

canvas = d3.select("#canvas").append("svg:svg")
  .attr("width","100%")
  .attr("height","100%")

# patterns
defs = canvas.append("svg:defs")
for c in ["cream","leaf","cardinal-red","baltic-blue","black","brittany-blue","cardinal-red","fern","graphite","green-grape"]
  defs.append("svg:pattern").attr("id","p-tile-#{c}")
    .attr('patternUnits', 'userSpaceOnUse')
    .attr("width",72)
    .attr("height",72)
    .append("svg:image")
      .attr("width",72)
      .attr("height",72)
      .attr("xlink:href", "img/sw-#{c}.jpg")

#body
body = canvas.append("svg:rect")
  .attr("width","500")
  .attr("height","250")
  .attr("rx",30)
  .attr("ry",30)
  .attr("x",20)
  .attr("y",20)
  .attr("fill","url(#p-tile-fern)")
canvas.append("svg:rect")
  .attr("width","50")
  .attr("height","65")
  .attr("rx",25)
  .attr("ry",25)
  .attr("x",460)
  .attr("y",30)
  .attr("fill","#fff")

# left eye
leye = canvas.append("svg:svg")
leye.attr("x",100).attr("y",30)
g = leye.append("svg:g")

g.append("svg:circle")
      .attr("cx",50)
      .attr("cy",50)
      .attr("r",50)
      .attr("fill","url(#p-tile-cream)")
g.append("svg:circle")
        .attr("cx",30)
        .attr("cy",75)
        .attr("r",10)
        .attr("fill","url(#p-tile-cardinal-red)")

leye.call(d3.behavior.drag()
  .on("dragstart", ->
    @.__o = [@x.baseVal.value,@y.baseVal.value]
    )
  .on("drag", () ->
    @.x.baseVal.value += d3.event.dx
    @.y.baseVal.value += d3.event.dy
  )
  .on("dragend", -> delete @.__o )
)

Вот созданный JS для записи:

(function() {
  var body, c, canvas, defs, g, leye, _i, _len, _ref;
  canvas = d3.select("#canvas").append("svg:svg").attr("width", "100%").attr("height", "100%");
  defs = canvas.append("svg:defs");
  _ref = ["cream", "leaf", "cardinal-red", "baltic-blue", "black", "brittany-blue", "cardinal-red", "fern", "graphite", "green-grape"];
  for (_i = 0, _len = _ref.length; _i < _len; _i++) {
    c = _ref[_i];
    defs.append("svg:pattern").attr("id", "p-tile-" + c).attr('patternUnits', 'userSpaceOnUse').attr("width", 72).attr("height", 72).append("svg:image").attr("width", 72).attr("height", 72).attr("xlink:href", "img/sw-" + c + ".jpg");
  }
  body = canvas.append("svg:rect").attr("width", "500").attr("height", "250").attr("rx", 30).attr("ry", 30).attr("x", 20).attr("y", 20).attr("fill", "url(#p-tile-fern)");
  canvas.append("svg:rect").attr("width", "50").attr("height", "65").attr("rx", 25).attr("ry", 25).attr("x", 460).attr("y", 30).attr("fill", "#fff");
  leye = canvas.append("svg:svg");
  leye.attr("x", 100).attr("y", 30);
  g = leye.append("svg:g");
  g.append("svg:circle").attr("cx", 50).attr("cy", 50).attr("r", 50).attr("fill", "url(#p-tile-cream)");
  g.append("svg:circle").attr("cx", 30).attr("cy", 75).attr("r", 10).attr("fill", "url(#p-tile-cardinal-red)");
  leye.call(d3.behavior.drag().on("dragstart", function() {
    return this.__o = [this.x.baseVal.value, this.y.baseVal.value];
  }).on("drag", function() {
    this.x.baseVal.value += d3.event.dx;
    return this.y.baseVal.value += d3.event.dy;
  }).on("dragend", function() {
    return delete this.__o;
  }));
}).call(this);

Answer 1

Похоже, ошибка перерисовки с реализацией шаблона WebKit - грязная область (где глаз был до последнего перемещения мыши) не перерисовывается должным образом. Вы должны сообщить об ошибке в WebKit. Тем временем вы, вероятно, можете обойти это, используя HTML и стиль фонового изображения, а не используя шаблон SVG.

Вы также можете попробовать this.setAttribute ("x", ...) или d3.select (this) .attr ("x", ...) вместо назначения this.x.baseVal.value, но это маловероятно, что это исправит ошибку перерисовки.