Javascript 如何根据某个函数为svg中的每个像素分配颜色？

我想做的是根据x和y坐标的函数，根据屏幕上其他对象的关系，给每个像素上色。我正在使用d3来完成所有其他svg工作，但我不知道如何将每个像素绑定为数据，然后再进行处理。不发布代码是因为我正在寻找一种非常通用的方法来实现这一点：例如，将每个点涂成（x+y）%73==0绿色。

对于那些感兴趣的人：回顾一下，对于这样的任务，我建议使用画布而不是SVG，但这里有一种使用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";
        });
}

WIDTH=$（窗口）.WIDTH（）；
高度=$（窗口）.HEIGHT（）；
$（文档）.ready（函数（）{
var svg=d3。选择（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
点数=[]
for（x=0；xSVG不适合这样做。改用画布。我同意，但我在d3代码中投入了足够的资金，找到了使用矩形的另一种方法。见下文。