使用 D3 和 CSS 将图像精灵添加到 svg答案

【问题标题】：Add image sprite to svg using D3 and CSS使用 D3 和 CSS 将图像精灵添加到 svg
【发布时间】：2018-03-19 09:42:26
【问题描述】：

尝试使用 css 背景和 background-position 将图像精灵添加到 svg，作为来自 http://www.flag-sprites.com 的说明，img 占位符显示在调试工具中的正确位置，但为空白。似乎由于某种原因css没有设置背景。我有一个标志精灵显示在与基本 html 相同的页面上，所以这似乎只是 svg 的问题。 CSS 看起来像这样。

    .flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('../images/flags.png') no-repeat;

}


.flag.flag-mm {
    background-position: -352px -256px;
}

.flag.flag-bf {
    background-position: -128px -32px;
}

javaScript

const node = svg.append("g")
        .selectAll("image")
        .data(data.nodes)
        .enter()
        .append("image")
        //.append("img")
        .attr("class", function(d) { return `flag flag-${d.code}`})
        .attr("xlink:href", "/dist/images/blank.gif")

【问题讨论】：

什么是"xlink:src"？
应该是 xlink:href 在尝试了一些东西后忘记改回来。将在上方编辑

标签： javascript css d3.js

【解决方案1】：

找不到原始问题的答案，但找到了解决方法。我在图形容器中添加了一个带有标志类的 div

<div id="graph">      
  <div class="flag-holder"></div>
</div>

然后通过图形选择为每个节点添加一个 img

  var node = graph.select(".flag-holder").selectAll(".node")
        .data(json.nodes)
        .enter().append("img")
        .attr('class', d => 'flag flag-' + d.code)

最后在 d3 图表的每个刻度上添加样式 left 和 top

force.on("tick", function() {
  link.attr("x1", function(d) {
    return d.source.x;
  })
  .attr("y1", function(d) {
    return d.source.y;
  })
  .attr("x2", function(d) {
    return d.target.x;
  })
  .attr("y2", function(d) {
    return d.target.y;
  });
  node.style('left', d => (d.x - 8) + "px")
      .style('top', d => (d.y - 5) + "px");
});

【讨论】：