2016-10-04 5 views
1

私はそれを読むJSON is built on two structuresD3.jsにJSONリストを描画する方法は?

私はJSONリストからチャートを作成できますが、CakePHPの問題は出力がJSONオブジェクト形式であることです。

D3スクリプトでJSONオブジェクトを取得するにはどうすればよいですか?

(私はd3.v4.min.jsを使用)

data.json

{ 
    "result": [ 
     { 
      "owner": "0", 
      "variable": "Setpoint", 
      "date": "2016-09-28T19:24:19-0400", 
      "datas": 20 
     }, 
     { 
      "owner": "0", 
      "variable": "Setpoint", 
      "date": "2016-09-25T10:07:42-0400", 
      "datas": 20 
     } 
    ] 
} 

スクリプト

var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
    width = 960 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 

// parse the date/time 
var parseTime = d3.timeParse("%Y-%m-%dT%H:%M:%S%Z"); 

// set the ranges 
var x = d3.scaleTime().range([0, width]); 
var y = d3.scaleLinear().range([height, 0]); 

// define the line 
var valueline = d3.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.datas); }); 

// append the svg obgect to the body of the page 
// appends a 'group' element to 'svg' 
// moves the 'group' element to the top left margin 
var svg = d3.select("#debug").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 

// Get the data 
d3.json("http://localhost/badina/datas/d3/0/Setpoint.json", function(error, data) { 
    if (error) throw error; 

    // format the data 
    data.forEach(function(d) { 
     d.date = parseTime(d.date); 
     d.datas = +d.datas; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([0, d3.max(data, function(d) { return d.datas; })]); 

    // Add the valueline path. 
    svg.append("path") 
     .data([data]) 
     .attr("class", "line") 
     .attr("d", valueline); 

    // Add the X Axis 
    svg.append("g") 
     .attr("transform", "translate(0," + height + ")") 
     .call(d3.axisBottom(x)); 

    // Add the Y Axis 
    svg.append("g") 
     .call(d3.axisLeft(y)); 

}); 

答えて

0

VARデータ= data.result

d3.json("http://localhost/badina/data1.json", function(error, data) { 
    if (error) throw error; 
    var data = data.result 
    console.log(data); 
    // format the data 
    data.forEach(function(d) { 
関連する問題