2
嗨,大家好,我已經成功使用d3.js繪製網格。網格由10行5列,我應該如何使用mouseOnclick那個路口應該像我標記的行和列的交叉點指示點相交如何點svg和d3.js中的線的交點
var svg = d3.select("body").append("svg").attr("width", 500).attr("height", 500);
var inputs = [
{ "x1": 100, "x2": 500, "y1": 50, "y2": 50},
{ "x1": 100, "x2": 500, "y1": 90, "y2": 90},
{ "x1": 100, "x2": 500, "y1": 130, "y2": 130},
{ "x1": 100, "x2": 500, "y1": 170, "y2": 170},
{ "x1": 100, "x2": 500, "y1": 210, "y2": 210},
{ "x1": 100, "x2": 500, "y1": 250, "y2": 250},
{ "x1": 100, "x2": 500, "y1": 290, "y2": 290},
{ "x1": 100, "x2": 500, "y1": 330, "y2": 330},
{ "x1": 100, "x2": 500, "y1": 370, "y2": 370},
{ "x1": 100, "x2": 500, "y1": 400, "y2": 400},
//columns
{ "x1": 100, "x2": 100, "y1": 50, "y2": 400},
{ "x1": 200, "x2": 200, "y1": 50, "y2": 400},
{ "x1": 300, "x2": 300, "y1": 50, "y2": 400},
{ "x1": 400, "x2": 400, "y1": 50, "y2": 400},
{ "x1": 500, "x2": 500, "y1": 50, "y2": 400},
]
svg.selectAll("line").data(inputs).enter().append("line")
.attr("x1", function(d) {
return d.x1;
})
.attr("x2", function(d) {
return d.x2;
})
.attr("y1", function(d) {
return d.y1;
})
.attr("y2", function(d) {
return d.y2;
})
.attr("stroke", "red")
這裏是我的小提琴:https://jsfiddle.net/7mmgedax/
是否有可能將整個網格 –