在js中将颜色更改为图像

Question

我用这个不错的graph。

在

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

group需要填充颜色：

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

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

谢谢！

Answer 1

在 SVG 中，您使用一种模式来填充图像，然后链接到它。为了使您的文档保持“数据驱动”并本着 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
                     })

然后，当您想使用图像作为填充时，只需将属性添加到 relent 对象中

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

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

---

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

结果：

源图片：