Javascript 如何用图像填充D3 SVG，而不是用填充颜色？

我想创建一些类似下图的东西，但我想使用表情符号（whatsapp表情符号等）的图像来代替圆圈

我想从JSON中提取的数据应该如下所示：

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

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

有人知道我怎样才能做到这一点吗

我发现了一个非常好的示例，但我不知道如何使用代码，以便获得图像而不是颜色？

---

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

使用此代码：

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

})();

（函数（）{
var json={“国家/地区/地区”：[
{“url”：“emoji-1.png”，“hits”：100}，{“url”：“emoji-2.png”，“hits”：200}
]};
//D3气泡图
var直径=600；
var svg=d3.select（'#graph'）.append（'svg'））
.attr（宽度、直径）
.attr（高度、直径）；
var bubble=d3.layout.pack（）
.尺寸（[直径，直径]）
.value（函数（d）{返回d.size；}）
//.排序（功能（a、b）{
//返回-（a值-b值）
// }) 
.填充（3）；
//使用计算的布局值生成数据
var nodes=bubble.nodes（processData（json））；//过滤掉外部气泡
var vis=svg.selectAll（'circle'）
.数据（节点）；
vis.enter（）.append（“图像”）
.attr（“xlink:href”，函数（d）{
返回d.url；}）
.attr（“宽度”，函数（d）{
控制台日志（“d.r:+d.r”）；
返回d.r；}）
.attr（“高度”，函数（d）{返回d.r；}）
.attr（'transform'，函数（d）{return'translate（'+d.x+'，'+d.y+'）；}）
.attr（'class'，函数（d）{返回d.className；}）；
函数processData（数据）{
var objs=data.countries\u msg\u vol；
var newDataSet=[]；
for（var i=0；id3是一个很好的库

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

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

使用此代码：

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

})();

（函数（）{
var json={“国家/地区/地区”：[
{“url”：“emoji-1.png”，“hits”：100}，{“url”：“emoji-2.png”，“hits”：200}
]};
//D3气泡图
var直径=600；
var svg=d3.select（'#graph'）.append（'svg'））
.attr（宽度、直径）
.attr（高度、直径）；
var bubble=d3.layout.pack（）
.尺寸（[直径，直径]）
.value（函数（d）{返回d.size；}）
//.排序（功能（a、b）{
//返回-（a值-b值）
// }) 
.填充（3）；
//使用计算的布局值生成数据
var nodes=bubble.nodes（processData（json））；//过滤掉外部气泡
var vis=svg.selectAll（'circle'）
.数据（节点）；
vis.enter（）.append（“图像”）
.attr（“xlink:href”，函数（d）{
返回d.url；}）
.attr（“宽度”，函数（d）{
控制台日志（“d.r:+d.r”）；
返回d.r；}）
.attr（“高度”，函数（d）{返回d.r；}）
.attr（'transform'，函数（d）{return'translate（'+d.x+'，'+d.y+'）；}）
.attr（'class'，函数（d）{返回d.className；}）；
函数processData（数据）{
var objs=data.countries\u msg\u vol；
var newDataSet=[]；
对于（var i=0；i您在哪里查找数据？如果您知道-查看API-如果不知道，则查找源代码。我们不是来为您工作的-我们是来解决问题的。@BLewis我不需要像真实的实时数据一样的数据。问题是我想知道如何制作这样的数据？我将在JSON文件中制作一些数据。@BLewis也，我在这里找到了一个很好的例子：但问题是我不知道如何编辑它，所以它只显示图像而不是颜色。好的，所以你应该重新表述你的问题-你正在寻找的是一种使用D3嵌入自定义图像的方法-你可以简单地使用动态CSS来设置元素的样式，就像你发送的元素一样，但这是低效的有很多表情符号-所以你可能希望网络浏览器对输出进行栅格化-我没有这样做-所以我不能提供一个解决方案。对不起！如果你只是想让它工作，但不关心性能/构建时间-修改CSS以使用
背景图像
，而不是
背景颜色
，并引用表情符号-另一个mi在构建过程中，使用JS从JSON中添加CSS也不会节省时间。你在哪里寻找数据？如果你知道-去看看API-如果不知道，那么找一个源。我们不是来为你工作的-我们是来解决问题的。@BLewis我不需要像真实数据一样的数据。问题是我想知道如何制作一些东西像这样？我将在一个JSON文件中生成一些数据。@BLewis同样，我在这里发现了一个很好的例子：但问题是我不知道如何编辑它，所以它只显示图像而不是颜色。好的，所以你可能应该重新表述你的问题-你正在寻找的是一种使用D3嵌入自定义图像的方法-你可以简单地使用动态CSS to样式元素，如您发送的元素，但这样做效率低下