json의 여러 라인 차트 문제

다음은 내 code입니다. 저는 축을 기준으로 수개월을 기준으로 습도와 이슬점을 계획하려고했습니다. 그러나 나는 정의되지 않은 데이터의 오류를 얻고 있으며, 축의 달 또한 숫자로 나타납니다.json의 여러 라인 차트 문제

<!DOCTYPE html> 
<meta charset="utf-8"> 
<html> 
<head> 
    <title> Data Visualization - Binding Dataset to Shapes Using D3 </title> 
    <script src="https://d3js.org/d3.v3.min.js"></script> 
</head> 
<style> /* set the CSS */ 

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; 
} 

.legend { 
    font-size: 16px; 
    font-weight: bold; 
    text-anchor: middle; 
} 

</style> 
<body> 

<script> 

// Set the dimensions of the canvas/graph 
var margin = {top: 30, right: 20, bottom: 70, left: 50}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 

// Parse the date/time 
var parseDate = d3.time.format("%b").parse; 

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

// Define the axes 
var xAxis = d3.svg.axis().scale(x) 
    .orient("bottom").ticks(5); 

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

// Define the line 
var priceline = d3.svg.line() 
    .x(function(d) { return x(d.date); }) 
    .y(function(d) { return y(d.dew); }); 

// Adds the svg canvas 
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 + ")"); 

// Get the data 
d3.json("weatherdata.json", function(error, data) { 
    data.forEach(function(d) { 
     d.date = parseDate(d.history.date.mon); 
     d.dew = +d.history.dailysummary[0].meandewptm; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain(d3.extent(data, function(d) { return d.dew; })); 

    // Nest the entries by symbol 
    var dataNest = d3.nest() 
     .key(function(d) {return d.dew;}) 
     .entries(data); 

    var color = d3.scale.category10(); // set the colour scale 

    legendSpace = width/dataNest.length; // spacing for legend 

    // Loop through each symbol/key 
    dataNest.forEach(function(d,i) { 

     svg.append("path") 
      .attr("class", "line") 
      .style("stroke", function() { // Add the colours dynamically 
       return d.color = color(d.key); }) 
      .attr("d", priceline(d.values)); 

     // Add the Legend 
     svg.append("text") 
      .attr("x", (legendSpace/2)+i*legendSpace) // spacing 
      .attr("y", height + (margin.bottom/2)+ 5) 
      .attr("class", "legend") // style the legend 
      .style("fill", function() { // dynamic colours 
       return d.color = color(d.key); }) 
      .text(d.key); 

    }); 

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

    // Add the Y Axis 
    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

}); 

</script> 
</body> 

</html>

어떻게 해결할 것인지 잘 모르겠습니다. 누구든지 도와주세요. 나는 을 current issue으로 공유하고 있습니다.

나는 같이해야 model data 방법을 첨부 : 사전에

감사합니다.

출처

2017-12-20 MindInDoubt

여기에 코드를 추가하고 링크하지 마십시오. – user2154065

나는하려고 노력하고있다. 그러나 그것은 그것이 가정되는 것처럼 보이지 않는다. 그것이 내가 연결된 이유입니다. – MindInDoubt

[보십시오] (https://meta.stackexchange.com/questions/88541/how-to-write-code-in-a-question-or-answer) 코드를 작성합니다. 여기에 아무도 그 Google 드라이브 링크를 클릭하지 않을 것이기 때문에 당신의 시간을 가지고 질문을 편집하십시오. –

X 축의 날짜 형식에 대한 귀하의 질문에 대해 (더 많은 평판이 필요합니다) 의견을 쓸 수 없어 답변을드립니다.

난 당신 만 달 표시이

chart.xAxis 
.tickFormat(function(d) { 
return d3.time.format('%b')(format(d)); 
});

같은 것을 할 필요가 있다고 생각.

출처

2017-12-20 14:41:57 Exarkun

도움 주셔서 감사합니다. – MindInDoubt

json의 여러 라인 차트 문제

답변

관련 문제