javascript - D3 xlink : "href" appends image fine on Google Chrome but not on 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")。