Javascript 将图像平铺到D3.js网格中

我试图在d3.js svg元素中添加一个图像，以组成一个12x12网格。我有我的12x12网格，但只能知道如何在每个网格部分中上载整个图像，而不是将图像逐块添加到最后创建一个平铺图像。任何关于如何解决这一问题的想法都将不胜感激，谢谢

注意：csv文件中的数据只是构成12x12网格的坐标

var data=d3.范围（36）.映射（函数（i）{
返回{
x_坐标：（i%6）*12，
y_坐标：数学层（i/6）*12，
};
});
//设置图形的尺寸和边距
var保证金={
排名：1，
底数：15，
左:0,，
右：0
},
宽度=350，
高度=350；
//将svg对象附加到页面主体
var svg=d3。选择（“平铺照片”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//行和列的标签->名为“xCoordinate”和“yCoordinate”的列的唯一标识符
var xCoordinate=d3.map（数据，函数（d）{
返回d.x_坐标；
}).keys（），
yCoordinate=d3.map（数据，函数（d）{
返回d.y_坐标；
}).keys（）；
//构建X和Y比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域（xCoordinate）
.填料（0.025），
y=d3.scaleBand（）
.范围（[0，高度]）
.域（yCoordinate）
.填料（0.025）；
//添加将构成平铺照片的12x12矩形
var tileImage=svg.selectAll（）
.数据（数据、功能（d）{
返回d.x_坐标+'：'+d.y_坐标；
})
.enter（）；
附加（“svg:image”）
.attr（“x”，函数（d）{
返回x（d.x_坐标）
})
.attr（“y”，函数（d）{
返回y（d.y_坐标）
})
.attr（“rx”，0）
.attr（“ry”，0）
.attr（“宽度”，x.带宽（））
.attr（“高度”，y.带宽（））
.attr（“xlink:href，”https://via.placeholder.com/72");
如果您只对视觉部分感兴趣，您可以通过只添加一次图像并使用。这将创建一个覆盖图像的过滤器，只允许显示特定位置的像素

我不确定这是否允许您检测单个瓷砖上的点击。如果您需要，我实际上建议使用服务器为您分割图像并将其分块提供


var data=d3.范围（36）.映射（函数（i）{
返回{
x_坐标：（i%6）*12，
y_坐标：数学层（i/6）*12，
};
});
//设置图形的尺寸和边距
var保证金={
排名：1，
底数：15，
左:0,，
右：0
},
宽度=350，
高度=350；
//将svg对象附加到页面主体
var svg=d3。选择（“平铺照片”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//行和列的标签->名为“xCoordinate”和“yCoordinate”的列的唯一标识符
var xCoordinate=d3.map（数据，函数（d）{
返回d.x_坐标；
}).keys（），
yCoordinate=d3.map（数据，函数（d）{
返回d.y_坐标；
}).keys（）；
//构建X和Y比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域（xCoordinate）
.填料（0.025），
y=d3.scaleBand（）
.范围（[0，高度]）
.域（yCoordinate）
.填料（0.025）；
var clipPath=svg
.append（“clipPath”）
.attr（“id”、“作物”）
.selectAll（“rect”）
.数据（数据、功能（d）{
返回d.x_坐标+'：'+d.y_坐标；
})
.输入（）
.append（“svg:rect”）
.attr（“宽度”，x.带宽（））
.attr（“高度”，y.带宽（））
.attr（“x”，函数（d）{
返回x（d.x_坐标）
})
.attr（“y”，函数（d）{
返回y（d.y_坐标）
});
var tileImage=svg.append（“svg:image”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.attr（“剪辑路径”、“url（#裁剪）”）
.attr（“xlink:href，”https://via.placeholder.com/72");
如果您只对视觉部分感兴趣，您可以通过只添加一次图像并使用。这将创建一个覆盖图像的过滤器，只允许显示特定位置的像素

我不确定这是否允许您检测单个瓷砖上的点击。如果您需要，我实际上建议使用服务器为您分割图像并将其分块提供


var data=d3.范围（36）.映射（函数（i）{
返回{
x_坐标：（i%6）*12，
y_坐标：数学层（i/6）*12，
};
});
//设置图形的尺寸和边距
var保证金={
排名：1，
底数：15，
左:0,，
右：0
},
宽度=350，
高度=350；
//将svg对象附加到页面主体
var svg=d3。选择（“平铺照片”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//行和列的标签->名为“xCoordinate”和“yCoordinate”的列的唯一标识符
var xCoordinate=d3.map（数据，函数（d）{
返回d.x_坐标；
}).keys（），
yCoordinate=d3.map（数据，函数（d）{
返回d.y_坐标；
}).keys（）；
//构建X和Y比例和轴：
var x=d3.scaleBand（）
.范围（[0，宽度]）
.域（xCoordinate）
.填料（0.025），
y=d3.scaleBand（）
.范围（[0，高度]）
.域（yCoordinate）
.填料（0.025）；
var clipPath=svg
.append（“clipPath”）
.attr（“id”、“作物”）
.selectAll（“rect”）
.数据（数据、功能（d）{
返回d.x_坐标+'：'+d.y_坐标；
})
.输入（）
.append（“svg:rect”）
.attr（“宽度”，x.带宽（））
.attr（“高度”，y.带宽（））
.attr（“x”，函数（d）{
返回x（d.x_坐标）
})
.attr（“y”，函数（d）{
返回y（d.y_坐标）
});
瓦特莱梅=