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のパターン実装で再描画のバグのように見えます。ダーティリージョン（目が最新のmousemoveより前のもの）は正しく再描画されません。 WebKitに対してバグを報告する必要があります。その間、おそらくSVGパターンを使用するのではなく、HTMLと背景画像スタイルを使用して回避することができます。

this.x.baseVal.valueに割り当てるのではなく、this.setAttribute（ "x"、...）またはd3.select（this）.attr（ "x"、...）を試すこともできますが、それは再描画のバグを修正するだろう。