Question

我想做的是根据与x和y坐标的函数，根据与屏幕上其他对象的关系，为每个像素着色。我正在使用d3来完成我所有的其他svg工作，但我无法弄清楚如何绑定每个像素，因为数据然后工作。不发布代码，因为我正在寻找一种非常通用的方法：例如，为每个点着色，使（x + y）％73 == 0 绿色。

Answer 1

对于那些感兴趣的人：回头看我会推荐使用SVG上的canvas来完成这样的任务，但这里有一种使用d3的黑客攻击解决方案：

WIDTH = $(window).width();
HEIGHT = $(window).height();

$(document).ready( function() {
    var svg = d3.select("#svg")
        .attr("width", WIDTH)
        .attr("height", HEIGHT);
    points = []
    for (x=0;x<WIDTH/10;x++) {
        for (y=0;y<HEIGHT/10;y++) {
            points.push([x,y]);
        }
    }
    svg.selectAll("rect")
        .data(points)
      .enter().append("rect")
        .attr("x", function(d) {return d[0];})
        .attr("y", function(d) {return d[1];})
        .attr("width",1)
        .attr("height",1)
        .style("fill",function(d) {
            if ((d[0] + d[1])%73 == 0)
                return "green";
            return "black";
        });
}

这假设你的html体中有一个带有 id = svg 的svg元素。为了测试的目的，我在每个尺寸方面只经过1/10的路径，完整尺寸加载速度要慢100倍，考虑到你真的不应该使用SVG，这是非常慢的。

如何根据某些功能为svg中的每个像素分配颜色？

1 个答案: