javascript - 标记 Sprite 未在D3强制布局中呈现

我正在尝试将此CSS标志精灵库呈现在我的D3 Force布局图中

https://www.flag-sprites.com/

但是，似乎没有任何结果。这是相同的codepen。

http://codepen.io/redixhumayun/pen/ZLELvG?editors=0010

这是我试图渲染精灵的相关代码

var node = svg.selectAll('.node')
                .data(data_nodes)
                .enter().append('svg:image')
                .attr('class', function(d){ return 'flag flag-'+d.code })
                .attr('src', 'blank.gif')
                .attr('width', '20px')
                .attr('height', '50px');

node.attr('x', function(d) { return (d.x - 5); })
        .attr('y', function(d) { return (d.y - 2); })
        .on('mouseover', function(d){
           console.log(d.country);
        })

最佳答案

您的问题是您使用的是svg：image元素和flagsprites，并且其CSS设置为期望使用常规html img元素

但是，在这里获取此Codepen的一部分-> https://codepen.io/AmeliaBR/pen/mwzBD

...您可以使用鞭毛图像和一些裁剪来模拟鞭毛css的功能

因此，以您的Codepen为例，首先更改您的html，设置一个剪辑和另一个包含标志sprites png的隐藏svg作为要引用的图像：

  <svg class='chart'>
     <clipPath id="icon-cp" >
        <rect x="0" y="0" width="16" height="11" />
    </clipPath>
  </svg>
  <svg style="display:none">
    <image id="icon-sprite" width="256" height="176" xlink:href="https://*dropbox_addy_excised_for_privacy*/country%20data%20for%20force%20directed%20graph/flags.png" />
  </svg>

这里的缺点是需要声明标志sprite png和sprite的大小（以及图像所处的地址，我已将其切除）

然后，需要像这样设置javascript中的节点：

var node = svg.selectAll('.node')
                .data(data_nodes)
                .enter().append('g')
                .attr("clip-path", "url(#icon-cp)")
  ;

  node.append("use")
                .attr("xlink:href", "#icon-sprite")
                .attr('class', function(d){
                  return 'flag flag-'+d.code
                })
  ;

// this bit then takes the background-position style from the flag-sprite css and turns it
// into a translate coordinate for use with the transform attribute
  node.selectAll("use")
    .attr("transform", function() {
     var commaed = d3.select(this).style("background-position").replace(/[px]/g, "").replace(" ", ",");
      return "translate ("+commaed+")"
  })

然后像这样调整节点：

node.attr('transform', function(d) { return "translate ("+(d.x - 5)+","+(d.y - 2)+")"; })
        .on('mouseover', function(d){
           console.log(d.country);
        })

关于javascript - 标记 Sprite 未在D3强制布局中呈现，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41509228/