如何通过读取 x 和 y 点 json 文件在 d3 中创建网格.js

Question

我期待着在 D10 中创建 10 行和 3 列网格.js但这里的 X 和 Y 线点应该从 JSON 文件中读取。 我不知道该怎么做。

-------------------------------
|       |      |       |     |
-------------------------------
|       |      |       |     |
------------------------------
|       |      |       |     |
------------------------------

var width = 500;
var height = 500;
//Create SVG element
var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);//Create line element inside SVG
svg.append("line")
.attr("x1", 100)
.attr("x2", 500)
.attr("y1", 50)
.attr("y2", 50)
.attr("stroke", "black")

var svg1= d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
//Create line element inside SVG
svg1.append("line")
.attr("x1", 0)
.attr("x2", 0)
.attr("y1", 0)
.attr("y2", 200)
.attr("stroke", "black")

这是我的小提琴 https://jsfiddle.net/zppLjvjh/

Answer 1

你的 json 应该包含网格的所有位置，如下所示：

var inputs = [{  "x1": 100,  "x2": 500,  "y1": 50,  "y2": 50},
{  "x1": 100,  "x2": 500,  "y1": 60,  "y2": 60},
....

然后，您可以重用属性来绘制线条：

.attr("x1", function(d) {
return d.x1;
})

见 https://jsfiddle.net/n0sauja1/

Answer 2

//Create SVG element
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": 60,  "y2": 60},
{  "x1": 100,  "x2": 500,  "y1": 70,  "y2": 70},
{  "x1": 100,  "x2": 500,  "y1": 80,  "y2": 80},
{  "x1": 100,  "x2": 100,  "y1": 50,  "y2": 80},
{  "x1": 160,  "x2": 160,  "y1": 50,  "y2": 80},  
{  "x1": 220,  "x2": 220,  "y1": 50,  "y2": 80},  
{  "x1": 280,  "x2": 280,  "y1": 50,  "y2": 80}, 
{  "x1": 340,  "x2": 340,  "y1": 50,  "y2": 80}, 
{  "x1": 400,  "x2": 400,  "y1": 50,  "y2": 80},
{  "x1": 460,  "x2": 460,  "y1": 50,  "y2": 80},
{  "x1": 500,  "x2": 500,  "y1": 50,  "y2": 80},
] 

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")