在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，但它是相當不可能的這將修復重繪錯誤。