如何填充D3 SVG与图像而不是颜色填充？ [英] How to fill D3 SVG with image instead of colour with fill?

问题描述

我想创建类似下面的图片，而不是圈子，我想使用表情符号的图片（whatsapp表情符号等）

我想提取的数据从JSON应该看起来像这样：

  {
'url'：'see-no-evil.png '，
'hits'：456 
}，
 {
'url'：'speak-no-evil.png'，
'hits'：425 $表情符号应该随机出现在画布上，并且具有最多的hits的表情符号应该显示最大和最小的一个作为最小。它应该尽可能简单，并自动更新一旦我更改值或添加一些东西到JSON。
 
 
 
有谁知道我可以实现这一点吗？ p> 
 
 
 我发现了一个很好的例子，但我不知道如何使用代码，以便我可以获取图像而不是颜色？ 
  http://codepen.io/girliemac/pen/cDfmb  
 $ 
 
 
 
在您的示例中，请尝试使用下面的命令：b $ b 
解决方案
代替这个代码：
  vis.enter（）。append（'circle'）
 .attr ，function（d）{return'translate（'+ dx +'，'+ dy +'）';}）
 .attr（'r'，function（d）{return dr;}）
 .attr（'class'，function（d）{return d.className;}）; 
  
使用此代码：
  vis.enter（）。append（image）
 .attr（xlink：href，your-image-url.png）
 .attr宽度函数（d）{return 2 * dr;}）
 .attr（height，function（d）{return 2 * dr;}）
 .attr （d）{return'translate（'+ dx +'，'+ dy +'）';}）
 .attr（'class'，function（d）{return d.className;}）; 
  
请注意，您将不得不使用图像的大小，因为图像将是正方形而你正试图处理圈子。尝试找到一个图像，其中表情符号触及图像的边缘。
 
 
 
希望这有助于！让我知道它是怎么回事。
 
 
 
编辑：解决方案第2部分基于评论中的讨论
 （function（）{
 
 var json = {countries_msg_vol：[
 {url：emoji-1.png，hits： 100}，{url：emoji-2.png，hits：200} 
]}; 
 
 // D3气泡图
 
 var diameter = 600; 
 
 var svg = d3.select（'＃graph'）。append（'svg'）
 .attr（'width'，diameter）
。 attr（'height'，diameter）; 
 
 var bubble = d3.layout.pack（）
 .size（[diameter，diameter]）
 .value ）{return d.size;}）
 // .sort（function（a，b）{
 // return  - （a.value  -  b.value）
 //}） 
 .padding（3）; 
 
 //生成带有计算布局值的数据
 var nodes = bubble.nodes（processData（json））; 
 
 var vis = svg.selectAll（'circle'）
 .data（nodes）; 
 
 vis.enter（）。append（image）
 .attr（xlink：href，function（d）{
 
 return d.url ;}）
 .attr（width，function（d）{
 console.log（dr：+ dr）; 
 return dr;}）
 .attr （'height'，function（d）{return dr;}）
 .attr（'transform'，function（d）{return'translate（'+ dx +'，'+ dy +'）'} ）
 .attr（'class'，function（d）{return d.className;}）; 
 
 function processData（data）{
 var objs = data.countries_msg_vol; 
 
 var newDataSet = []; 
 
 
 for（var i = 0; i  var obj = objs [i]; 
 console.log（obj.url ++ obj.hits）; 
 newDataSet.push（{url：obj.url，className：obj.url，size：obj.hits}）; 
} 
 return {children：newDataSet}; 
} 
 
}）（）; 
  
 
I would like to create something like the image below but instead of the circles I would like to use images of emoji's (the whatsapp emoticons etc.) 



The data I would like to extract from the JSON should look something like this:
{
    'url': 'see-no-evil.png',
    'hits': 456
  }, 
  {
    'url': 'speak-no-evil.png',
    'hits': 425
  },
The emoji's should appear on a canvas randomly and the one with the most "hits" should be displayed the biggest and the one with the least hits as the smallest. It should be as simple as possible and automatic update as soon as I change the values or add something to the JSON.

Does anyone know how I can achieve this?

I found a really great example but I don't know how to play with the code so that I can get images instead of colours?
http://codepen.io/girliemac/pen/cDfmb
解决方案
d3 is a good library to use for this.

In your example, try replacing this code:
vis.enter().append('circle')
        .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
        .attr('r', function(d) { return d.r; })
        .attr('class', function(d) { return d.className; });
with this code:
vis.enter().append("image")
    .attr("xlink:href", "your-image-url.png")
    .attr("width", function(d) { return 2*d.r; })
    .attr("height", function(d) { return 2*d.r; })
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
    .attr('class', function(d) { return d.className; });
Note that you will have to play with the size of the images a bit because the image will be square and you are trying to deal with circles. Try to find an image where the emoji touches the edges of the image.

Hope this helps! Let me know how it goes.

EDIT: solution part 2 based on discussion in the comments
(function() {

var json = {"countries_msg_vol": [
    {"url":"emoji-1.png","hits":100},{"url":"emoji-2.png","hits":200}
  ]};

    // D3 Bubble Chart 

    var diameter = 600;

    var svg = d3.select('#graph').append('svg')
                    .attr('width', diameter)
                    .attr('height', diameter);

    var bubble = d3.layout.pack()
                .size([diameter, diameter])
                .value(function(d) {return d.size;})
         // .sort(function(a, b) {
                //  return -(a.value - b.value)
                // }) 
                .padding(3);

  // generate data with calculated layout values
  var nodes = bubble.nodes(processData(json)); // filter out the outer bubble

  var vis = svg.selectAll('circle')
                    .data(nodes);

  vis.enter().append("image")
    .attr("xlink:href", function(d){

    return  d.url;})
    .attr("width", function(d) { 
    console.log("d.r:"+d.r);
    return d.r; })
    .attr("height", function(d) { return d.r; })
    .attr('transform', function(d) { return 'translate(' + d.x + ',' + d.y + ')'; })
    .attr('class', function(d) { return d.className; });

  function processData(data) {
    var objs = data.countries_msg_vol;

    var newDataSet = [];


    for(var i=0; i<objs.length; i++) {
        var obj = objs[i];
 console.log(obj.url+" "+obj.hits);
      newDataSet.push({url: obj.url, className: obj.url, size: obj.hits});
    }
    return {children: newDataSet};
  }

})();


                        
这篇关于如何填充D3 SVG与图像而不是颜色填充？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！