标记精灵未在D3强制布局中呈现 [英] Flag sprites not rendering in D3 force layout

问题描述

我试图将这个CSS标志精灵库呈现在我的D3 Force布局图中

I am trying to get this library of CSS flag sprites to render in my D3 Force layout graph

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

但是，似乎什么也没有呈现.这是相同的codepen.

However, nothing seems to render. Here is the codepen for the same.

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

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

Here is the relevant code where I am trying to render the sprite

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元素

Your problem is that you're using svg:image elements and flagsprites and its css is set up to expect regular html img elements

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

However, taking parts of this codepen here --> https://codepen.io/AmeliaBR/pen/mwzBD

......您可以使用您的旗帜精灵图像和一些裁剪来模拟旗帜精灵css的功能

...you can use your flagsprite image and some cropping to simulate what the flagsprites css does

因此，以您的Codepen为例，首先更改您的html，设置一个剪辑和另一个包含sflags png图片作为参考的隐藏svg:

So taking your codepen, first a change to your html, setting a clip and another hidden svg containing the flag sprites png as an image to reference:

  <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的大小(以及图像的地址，我已将其切除)

The disadvantage here is that the size of the flag sprite png and sprites need to be declared (and the address the image is at, which I've excised)

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

Then the nodes in your javascript need to be set up like this:

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+")"
  })

然后按如下所示调整

节点:

nodes are then adjusted like this:

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

这篇关于标记精灵未在D3强制布局中呈现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！