如何在d3.js中通過讀取x和y點創建網格json文件

-1

我期待在d3.js中創建10行和10列網格，但這裏的x和y線點應該從json文件中讀取。我沒有得到如何做到這一點。如何在d3.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/

來源

2017-08-28 srinivas gowda

您的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/

來源

2017-08-28 13:41:41

真棒添乙..列不存在 –

喜添乙請你可以分享你的郵件編號 –

我創建了一個撥弄多個列https://jsfiddle.net/n0sauja1/ 1/ –

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

來源

2017-08-29 06:30:25

小提琴：https：//jsfiddle.net/zppLjvjh/1/ –

如何在d3.js中通過讀取x和y點創建網格json文件

回答

相關問題