我有一个由几百个点组成的散点图,每个点由一个图像表示。坐标和图像文件名通过AJAX加载。它按预期工作,但是使用这种方法,每个图像都会自行加载,从而产生数百个请求。这是我现在使用的代码,工作正常:
function position(dot) {
dot .attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.r * 5; })
.attr("height", function(d) { return d.r * 10; })
.attr("xlink:href", function(d) { return d.ImageFile })
;
}
因此,为了加快速度,我在服务器上动态创建了一个精灵图像文件。这也很有效。但我无法找到如何加载该精灵并访问该精灵中的单个图像。我遇到了clipPath
,但我显然错误地使用了它:
function position(dot) {
dot .attr("x", function(d) { return d.x; })
.attr("y", function(d) { return d.y; })
.attr("width", function(d) { return d.r * 5; })
.attr("height", function(d) { return d.r * 10; })
.attr("clipPath", function(d) { return d.i*140 + " 0 140 200"; })
.attr("xlink:href", function(d) { return 'mySprite.jpg'; })
;
}
那么,如何在D3.js代码中使用在服务器上动态创建的精灵图像呢?
我的整体代码有点基于此示例:https://github.com/mbostock/bost.ocks.org/blob/gh-pages/mike/nations/index.html