D3js: сложно встраивать png в элемент svg через bade64 data uri?

Question

Мне удалось преобразовать PNG-изображения в данные URI, а затем вставить эти данные URI в HTML-элемент.

//HTML part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    $("#myImage").attr("src", "data:image/png;base64," + data); // inject data:image in DOM
    // data:[<mime type>][;charset=<charset>][;base64],<encoded data>
})

Это доказывает, что данные URI верны.

Но по какой-то причине я не смог найти какой-либо способ использовать d3js в клиентской базе данных, чтобы данные в конечном итоге отображали ожидаемое растровое изображение. Есть что-то, что мешает ему работать.

//SVG part
getImageBase64('http://fiddle.jshell.net/img/logo.png', function (data) {
    var width = 500, height = width/2;
    var svg = d3.select("svg").attr("width",width).attr("style","background:#80A0b4");
        svg.attr(':xmlns','http://www.w3.org/2000/svg') 
           .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');
    var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr(":xlink:href", "data:image/png;base64," + data); // replace link by data URI
})

Я подозреваю некоторый конфликт в собственных пространствах имен d3js xmlns или я сделал опечатку? Вот моя скрипка http://jsfiddle.net/xGUsu/106/. Любая идея?

(Связано с тем, почему мой png в кодировке base64 не виден внутри моего svg? JS: как кодировать файл image.png в код base64 для встраивания URI данных?)

Answer 1

Две ошибки:

Эти строки не нужны и вызывают ошибку (см. Консоль):

    svg.attr(':xmlns','http://www.w3.org/2000/svg') 
       .attr(':xmlns:xlink','http://www.w3.org/1999/xlink');

(Кроме : на фронте явно неправильно. xmlns написано без : в XML)

Во-вторых, вы забыли установить высоту вашего <image> элемент:

var g = svg.append("g").append("image")
        .attr("width", width / 2) 
        .attr("height", height ) 
        .attr("xlink:href", "data:image/png;base64," + data);

Рабочая скрипка