在js中将颜色更改为图像

Question

我用这个漂亮的图 。

在

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

group需要填充颜色：

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

但是，如果要保存在group url中（保存到图像，那么，我可以看到圆圈中的图像），在html中会是什么样子？

谢谢！

Answer 1

在SVG中，您可以使用图案填充图像，然后链接到该图像。 为了保持文档“数据驱动”，并按照D3的精神，您可以在d3中设置这种模式（其中urls是要使用的图像url的数组）。

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

然后，当您要将图像用作填充时，只需将属性添加到R​​elent对象中，如下所示：

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

当然，您可能希望能够以与使用color()获取类别颜色相同的方式将退出组映射到相关的模式ID。

---

这是JSFiddle的一个工作示例，该示例在SVG圆内呈现了Facebook徽标（光栅文件）。

结果：

源图像：