d3 Bild embeded angezeigt zweimal

Ich bin auf einem d3 Diagramm, das ein Bild einbetten, wie in diesem example:d3 Bild embeded angezeigt zweimal

var logoCanvas = d3.select("body").append("canvas") 
    .attr("id", "newCanvas") 
    .attr("width", width/2) 
    .attr("height", height/2) 
    .node(); 

    var context = logoCanvas.getContext("2d"); 
    var imageObj = new Image(); 
    imageObj.src = 'myImage.svg'; 
    imageObj.onload = function() { 
    context.drawImage(imageObj, 0, 0); 
    var imageData = document.getElementById("newCanvas").toDataURL("image/png") 
    //Add as SVG image element 
    d3.select("svg"). 
    append("image") 
     .datum(imageData) 
     .attr("height", 100) 
     .attr("width", 100) 
     .attr('transform', 'translate(' + [offsetX - 50, offsetY - 50] + ')') 
     .attr("xlink:href", function(d) { 
     return d 
     }) 
    }

Dies alles wie erwartet funktioniert, aber leider bekomme ich das Bild zwei Mal angezeigt. Im Grunde brauche ich nur die angehängte und nicht die, die auf den Kontext gezeichnet wird. Das Ding ist das Ich kann das angehängte nicht bekommen, ohne es zuerst zu zeichnen.

Gibt es eine Möglichkeit, das Bild, das im Kontext gezeichnet wird, zu verbergen?

Oder ein schlauer Ansatz, bei dem nur ein Bild angezeigt, aber eingebettet wird?

Quelle

2017-11-17 Gabor wraight

Können Sie versuchen, den Base64-Code des Bildes durch Lesen des Bildes mit [XMLHTTPRequest] (https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest) und [FileReader] (https://developer.mozilla.org/en-US/docs/Web/API/FileReader)? Wenn Sie nicht sicher sind, wie Sie das tun, fügen Sie bitte ein [Fidel] (https://jsfiddle.net/) mit dem Bild hinzu, ich werde Ihnen helfen. – Shashank

Wenn Sie den base64-Code haben, brauchen Sie keine Leinwand mehr. – Shashank

Hier ist ein code Ausschnitt eines XMLHTTPRequest() und FileReader() Ansatz zum Abrufen eines Bildes und "Einbetten" in ein SVG. Sie brauchen überhaupt keine Leinwand.

// append svg 
 
d3.select("body").append("svg").attr("height", "300px").attr("width", "276px"); 
 

 
var xhr1 = new XMLHttpRequest(); 
 
xhr1.open('GET', 'https://s7.postimg.org/40f9flc1n/dummy1.png'); 
 
xhr1.responseType = 'blob'; 
 
xhr1.onload = function() { 
 
    var fs = new FileReader(); 
 
    fs.onload = function (result) { 
 
    d3.select("svg").append("image") 
 
     .datum(result.target.result) 
 
     .attr("height", 300) 
 
     .attr("width", 276) 
 
     .attr("xlink:href", function(d) { 
 
     return d 
 
     }) 
 
    }; 
 
    fs.readAsDataURL(xhr1.response); 
 
}; 
 
xhr1.send();

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.7/d3.min.js"></script>

Hoffnung, das hilft. :)

Quelle

2017-11-17 16:06:05 Shashank

d3 Bild embeded angezeigt zweimal

Antwort

Verwandte Themen