D3 Line with JSON 데이터, 렌더링하지 않음

나는 Flicker 웹 서버를 가지고 Python 데이터를 받아들이고 /data에서 GET이 호출 될 때 jsonify 함수를 사용하여 JSON 객체를 반환한다. JSON 객체는 여기에 나와있는 대부분의 다른 예제처럼 중첩 목록이 아닙니다 (아래 샘플 참조).D3 Line with JSON 데이터, 렌더링하지 않음

JSON 데이터를 가져 와서 내 d3.svg.line() 함수에 전달하려고 시도했으나 전달되는 데이터에 문제가있는 것으로 보입니다. 내 웹 페이지가 축을 렌더링하지만 선이 나타나지 않습니다.

요소를 검사하면 x 축과 y 축에 데이터 (<path class="domain" d="M0,6V0H890V6"></path>)가 채워졌지만 내 <path class="line"></path>이 비어 있음을 알 수 있습니다.

저는 맵 함수를 사용하여 날짜와 값을 올바른 형식으로 변환하고 배열로 반환합니다. 이 함수에서 console.log을 실행하면 유효한 JSON 객체의 출력이 표시됩니다.

아무도 내가 여기서 잘못 가고있는 것을 도와 줄 수 있습니까? jsonified 객체를 중첩 목록으로 바꾸고 데이터 객체를 채우려면 forEach으로 설정해야합니까?

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style> 

body { font: 12px Arial; } 

path { 
    stroke: steelblue; 
    stroke-width: 2; 
    fill: none; 
} 

.axis path, .axis line { 
    fill: none; 
    stroke: grey; 
    stroke-width: 1; 
    shape-rendering: crispEdges; 
} 

</style> 

<body> 
<script src="//d3js.org/d3.v3.min.js"></script> 
    <script> 
     var margin = {top: 20, right: 20, bottom: 30, left: 50}, 
     width = 960 - margin.left - margin.right, 
     height = 500 - margin.top - margin.bottom; 

     var formatDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse; 

     var x = d3.time.scale().range([0,width]); 
     var y = d3.scale.linear().range([height,0]); 

     var xAxis = d3.svg.axis() 
      .scale(x) 
      .orient("bottom"); 

     var yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left"); 

     var valueline = d3.svg.line() 
      .x(function(d) {return x(d.timeStamps); }) 
      .y(function(d) {return y(d.outTemps); }); 

     var svg = d3.select("body") 
      .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 + ")"); 

     d3.json("/data",function(error, data) { 
      function type(d) { 
      d.timeStamps = 
      d.timeStamps.map(function (time) {return formatDate(time) }); 
      d.outTemps = d.outTemps.map(function (temp) {return parseFloat(temp)}); 
     }; 
    x.domain(d3.extent(data, function (d) {return d.timeStamps})); 
    y.domain(d3.extent(data, function(d) { return d.outTemps; })); 


     svg.append("path") 
      .datum(data) 
      .append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 

     svg.append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 

     svg.append("g")  
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     svg.append("g")  
      .attr("class", "y axis") 
      .call(yAxis); 

     }); 



</script> 
</body> 


{ 
    "outTemps": [ 
    "79.7", 
    "79.7", 
    "79.8", 
    ], 
    "timeStamps": [ 
    "2016-09-20 19:15:07", 
    "2016-09-20 19:10:07", 
    "2016-09-20 19:05:11", 
    ]

출처

2016-09-20 prions

귀하의 데이터 d3 ING에 대한 이상한 형식으로되어 있습니다 :

다음은 내 코드와 JSON의 샘플입니다. d3은 객체의 각 속성이 x 또는 y을 나타내는 객체 배열을 선호합니다. 그래서 데이터가 제대로 같은 것을 보일 것입니다 포맷 : 또한

[{ 
    "timeStamps": "2016-09-20T23:15:07.000Z", 
    "outTemps": 79.7 
}, { 
    "timeStamps": "2016-09-20T23:10:07.000Z", 
    "outTemps": 79.7 
}, { 
    "timeStamps": "2016-09-20T23:05:11.000Z", 
    "outTemps": 79.8 
}]

을, 내 생각 엔 ... 당신의 type 기능을 다시 포맷 데이터에서 시도하지만, 당신도 그것을 호출하지 않는 것입니다

그냥 다시 포맷 자바 스크립트를 사용하여 데이터를 원하는 경우

마지막으로,이 같은 것을 보일 것이다 : 그 보정

data = data.timeStamps.map(function(d, i) { 
    return { 
     timeStamps: formatDate(d), 
     outTemps: parseFloat(data.outTemps[i]) 
    } 
    });

, here's your running code and plot을.

출처

2016-09-21 00:41:49 Mark

감사합니다. 내 데이터 형식이 전혀 수용 가능하지 않습니까? 아니면 처리하는 데 더 많은 것이 었습니까? 함수는 정상적으로 작동하지만 올바른 값을 반환하기 위해 Flask 함수를 다시 포맷 할 수 있다고 생각합니다. 또한 내 type() 함수가 얼마나 멀리 떨어져 있었는지, 실제로 호출해야하는 곳 (나중에 참조 할 수 있도록). – prions

또한 왜 타임 스탬프에서지도를 호출하고 outTemps를 호출하지 않습니까? data.timeStamps.map (function (d, i) – prions

@prions, 1.) 당신은'type (data);'을 호출 할 수 있었지만 ** 동일한 구조 **에 데이터를 남겨 뒀을 것이다. timeStamps'를 날짜로,'outTemps'를 수레로 옮깁니다. 2.) IMHO, 플라스크에 올바른 형식의 데이터를 반환하는 것이 더 깔끔합니다. 3.)'.map'을'timeStamps' 또는'outTemps'로 가질 수 있습니다. 같은 길이의 배열이라면 상관 없습니다. – Mark

D3 Line with JSON 데이터, 렌더링하지 않음

답변

관련 문제