Question

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

enter image description here

我想从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部分基于评论中的讨论

(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图像而不是填充颜色？

1 个答案: