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

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元素。 为了测试目的，我在每个dimensino中只经历了1/10的方式，完整尺寸的加载速度要慢100倍，考虑到您确实不应该为此使用SVG，这相当慢。