[英]Flag sprites not rendering in D3 force layout
我正在嘗試讓這個 CSS 標志精靈庫在我的 D3 Force 布局圖中呈現
但是,似乎沒有任何內容。 這是相同的代碼筆。
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 元素
但是,在這里使用此代碼筆的一部分-> https://codepen.io/AmeliaBR/pen/mwzBD
...你可以使用你的 flagsprite 圖像和一些裁剪來模擬 flagsprites css 的作用
因此,使用您的 codepen,首先更改您的 html,設置一個剪輯和另一個包含標志精靈 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>
這里的缺點是需要聲明標志精靈 png 和精靈的大小(以及圖像所在的地址,我已經刪除了)
然后你的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);
})
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.