D3 xlink：“ href”可以在Google Chrome上很好地附加圖像，但不能在Firefox上附加圖像

Question

我正在嘗試在目標網頁上附加圖片標簽。 我可以在Google Chrome上運行它，但不能在Firefox上運行 。 為了澄清起見，圖像顯示在前者上，而不顯示在后者上。 有沒有其他人有這個問題？

這是我的HTML ...

<div id="viz"></div>

這是我的D3代碼...

var SVG = d3.select("#viz")
    .append("svg")
    .attr("width", 870)
    .attr("height", 800)

d3.select('SVG')
    .append('image')
    .attr('xlink:href','../../static/disney/avengers.png')
    .attr('class', 'avengers')
    .attr('height', '75')
    .attr('width', '150')
    .attr('x', '350')
    .attr('y', '350')

我已經降低了Stack Overflow的速度，但是還沒有找到解決此難題的任何有用的解決方案。 另外，我正在使用Django 。 不知道這是否對事物有影響。 有任何想法嗎？

Answer 1

SVG使用XML語法將元素名稱定義為區分大小寫。 因此，執行d3.select('SVG')應該會產生一個空的選擇-Firefox會正確執行-因為沒有大寫的SVG元素。 以下代碼段將在Chrome中將兩個選擇都記錄為1 （這是不正確的），而在Firefox中將記錄為1和0 （這是正確的行為）。 事實證明，IE 11確實顯示了正確的行為。

 console.log(d3.select("svg").size()); // 1 in all browsers console.log(d3.select("SVG").size()); // 0 in FF & IE 11; 1 in Chrome 

 <script src="https://d3js.org/d3.v4.js"></script> <svg></svg> 

考慮到這一點，解決您的問題變得容易。 將您的選擇更改為正確的d3.select("svg") 。

Answer 2

或設置.attr('height', "100%").attr('width', "100%")我也遇到了同樣的問題。 看來我缺少“寬度”屬性。