如何用图像而不是用填充颜色填充 D3 SVG？ [关闭]

Question

我想创建如下图所示的东西，但我想使用表情符号的图像（whatsapp 表情符号等）而不是圆圈

我想从 JSON 中提取的数据应该是这样的：

{
    'url': 'see-no-evil.png',
    'hits': 456
  }, 
  {
    'url': 'speak-no-evil.png',
    'hits': 425
  },

表情符号应随机出现在画布上，“点击次数”最多的应显示最大，点击次数最少的应显示为最小。它应该尽可能简单，并在我更改值或向 JSON 添加一些内容时自动更新。

有谁知道我如何做到这一点？

我找到了一个非常棒的示例，但我不知道如何使用代码来获取图像而不是颜色？ http://codepen.io/girliemac/pen/cDfmb

Answer 1

d3 是一个很好的库。

在您的示例中，尝试替换此代码：

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; });

使用此代码：

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; });

请注意，您将不得不稍微调整图像的大小，因为图像将是方形的，而您正在尝试处理圆形。尝试找到表情符号与图像边缘接触的图像。

希望这会有所帮助！告诉我进展如何。

编辑：解决方案第 2 部分基于 cmets 中的讨论

(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};
  }

})();