在js中将颜色更改为图像

Question

我使用这个很好的graph。

在

{"name":"Napoleon","group":1},

group需要填充颜色：

.style("fill", function(d) { return color(d.group); })

但是，如果我想保存在group网址（图片。那么，我可以看到圆圈中的图片），它在 html 中会是什么样子？

谢谢！

Answer 1

在SVG中，您使用图案填充图像，然后链接到图像。保持您的文档数据驱动＆＃39;在D3的精神中，您可以在d3中将模式设置为这样（其中urls是您要使用的图像网址数组。）

d3.select('svg')
    .append('defs')
        .selectAll('pattern')
        .data(urls)
        .enter()
            .append('pattern')
                .attr({
                    'id': function(d, i){return 'my_pattern_' + i;},
                    'patternUnits':'userSpaceOnUse',
                    'width': dotSize,
                    'height': dotSize
                }).append('image')
                    .attr({
                        'xlink:href': function(d){return d;},
                        'x': 0,
                        'y': 0,
                        'width': dotSize,
                        'height': dotSize
                     })

然后，当您想要将图像用作填充时，只需将属性添加到缓释对象

    .attr('fill', function(d, i){return 'url(#my_pattern_'+i+')'})

当然，您可能希望能够将现有组映射到相关模式ID，就像使用color()获取类别颜色一样。

---

这是JSFiddle的一个工作示例，它在SVG圈内呈现facebook徽标（光栅文件）。

<强>结果：

来源图片：