如何基于某些功能为SVG中的每个像素分配颜色？

Question

What I'd like to do is color each pixel based on a function of its x and y coordinates, based on relations to other objects on the screen. I'm using d3 to do all of my other svg work but I can't figure out how to bind each pixel as the data then work off of that. Not posting code because I am looking for a very general way to do this: for instance, color each point such that (x+y)%73==0 green.

Answer 1

For those interested: looking back I'd recommend canvas over SVG for a task like this, but here's a kind of hacked-together solution using 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";
        });
}

This assumes you have an svg element with id=svg in your html body. I've only gone through a 1/10 of the way in each dimensino for testing purposes, full size would load 100 times slower, which is pretty slow considering you really shouldn't be using an SVG for this.