d3.js에서 주어진 데이터로 그래프를 디자인하는 방법

Question

d3.js에서 선 그래프를 그릴 수 없어 일부 코드를 작성했지만 그래프를 표시하고 주어진 데이터에 대해 선을 그리는 방법을 사용했습니다. 주어진 데이터에 대한 데이터를 파싱하는 방법에 대한 문제와 주어진 코드 데이터에 대한 선을 그려야합니다.

var data=[{"key":[2000,1,1,12],"value":1000},{"key":[2000,2,1,12],"value":38965}, 
[{"key":[2000,7,1,24],"value":289},{"key":[2000,8,1,24],"value":389} 
] 

    var parseDate = d3.time.format("%Y.%m.%d.%H").parse; 
     var map=data.map(function (d){ 
     return { 
     key:parseDate((d.key[0])+"."+(d.key[1]+1)+"."+(d.key[2])+"."+(d.key[3]+1)),value:+d.value 
     } 
     }); 
console.log(map); 

var margin = {top: 15, right: 20, bottom: 70, left: 85}, 
     width = 440,height = 450; 
    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 line = d3.svg.line() 
     .x(function(d) { return x(d.key); }) 
     .y(function(d) { return y(d.value); }) 
     .interpolate("cardinal") 
     var svg = d3.select("body").select("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     x.domain(d3.extent(d3.map(function (d){return d.key;}))); 
     y.domain(d3.extent(d3.map(function (d){return d.key;}))); 
     svg.append("g") 
     .attr("class", "x axis x-axis") 
     .attr("transform", "translate(0," + height + ")").attr("fill","steelblue") 
     .call(xAxis); 
     svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis) 
     svg.append("path").datum(map).attr("class", "line").attr("d", line); 

Answer 1

가 있어야 data에 추가 [을 포함하여 위의 코드 문제의 숫자가 될 것 같다 :보다

var data=[ 
    {"key":[2000,1,1,12],"value":1000}, 
    {"key":[2000,2,1,12],"value":38965}, 
    {"key":[2000,7,1,24],"value":289}, 
    {"key":[2000,8,1,24],"value":389} 
] 

다른, 당신은 데이터를 구문 분석하는 방식은 잘 보인다 하지만 차트를 설정하는 방식에는 몇 가지 문제가 있습니다. 당신은 아마 쉽게 특정 문제를 디버깅하는 것이 아니라 그 jsfiddle을 수정 찾을 수 있습니다 http://bl.ocks.org/mbostock/3883245

: http://jsfiddle.net/henbox/9etp0xap/이 예에 따라 :

내가 여기 당신의 데이터를 사용하여 새로운 라인 차트를 만들었습니다.