使用D3.js从JPG中绘制精灵

时间:2014-07-27 16:20:02

标签: javascript svg d3.js css-sprites

我有一个由几百个点组成的散点图,每个点由一个图像表示。坐标和图像文件名通过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

0 个答案:

没有答案