d3.svg.line（）。x関数が呼び出されていません

Question

私はy軸上の価格とx軸上の日付を持つ折れ線グラフを描画しようとしています。実行

：

.attr("d", function(d){ 
      console.log(line(d.closePrice)); 
      return line(d); 
     }); 

線（d.closePriceする））（ヌルとd3.svg.line返しX（）とd3.svg.line（）yが呼び出されることはありません。私はd3.scale.linear（）を使用する同様の動作例を持っていますが、私のコードが失敗する原因を突き止めることはできません。

var x = d3.time.scale() 
     .domain([new Date(closes[0].closeDate), new Date(closes[closes.length - 1].closeDate)]) 
     .range([margin, width - margin]); 


    var y = d3.scale.linear() 
     .domain([closePriceMin, closePriceMax]) 
     .range([height - margin, margin]); 


    var line = d3.svg.line() 
     .x(function(d) { 
      console.log("line x called"); 
      return x(new Date(d.closeDate)); 
     }) 
     .y(function(d) { 
      console.log("line y called"); 
      return y(d.closePrice); 
     }); 


    var svg = d3.select("body").append("svg"); 

    svg.attr("height", height) 
     .attr("width", width); 

    svg.selectAll("path") 
     .data(closes) 
     .enter() 
     .append("path") 
     .attr("class", "line")    
     .attr("d", function(d){ 
      console.log(line(d.closePrice)); 
      return line(d); 
     }); 

私が使用してファイルからJSONを取得しています：

d3.json("data.json", function(error, json){ 

    for(var close in json){ 
     closes.push(json[close]); 

JSONフォーマット：私はJSONデータをチェックして、私はあなたのcloseDateフィールドを知ってもらう

[{ 
"id": 6031839, 
"equityId": 52597, 
"closeDate": "Apr 8, 2016", 
"closePrice": 12.73, 
"sma12Day": 13.891666666666664, 
"sma26Day": 13.184230769230773, 
"ema12Day": 12.533611111111112, 
"ema26Day": 12.696952662721895, 
"macd": -0.1633415516107828, 
"macdSignal": -0.17577601845764257, 
"macdHistogram": 0.012434466846859782, 
"openPrice": 12.91, 
"high": 12.91, 
"low": 12.72, 
"volume": 22700, 
"closePeak": false, 
"closeTroff": false, 
"macdPeak": false, 
"macdTroff": false 
}, { 
"id": 6030002, 
"equityId": 52597, 
"closeDate": "Apr 7, 2016", 
"closePrice": 12.61, 
"sma12Day": 13.908333333333331, 
"sma26Day": 13.159615384615385, 
"ema12Day": 12.385416666666666, 
"ema26Day": 12.570059171597633, 
"macd": -0.18464250493096657, 
"macdSignal": -0.17599694807672042, 
"macdHistogram": -0.008645556854246145, 
"openPrice": 12.78, 
"high": 12.78, 
"low": 12.6, 
"volume": 20700, 
"closePeak": false, 
"closeTroff": true, 
"macdPeak": false, 
"macdTroff": true 
}] 

Answer 1

をではありません現在。 date formatをご覧ください。これはあなたに日付の書式についての全体的な考えを与えるでしょう。

私はJSON

var data = [{"closePriceDate":"Apr-8-2016","closePrice":93.24},{"closePriceDate":"Apr-9-2016","closePrice":95.35}]; 
 

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

 
var formatDate = d3.time.format("%b-%e-%Y"); 
 

 
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(formatDate.parse(d.closePriceDate)) ; }) 
 
    .y(function(d) { return y(d.closePrice); }); 
 

 
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 + ")"); 
 

 
    x.domain(d3.extent(data, function(d) { return formatDate.parse(d.closePriceDate); })); 
 
    y.domain(d3.extent(data, function(d) { return d.closePrice; })); 
 

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

 
    svg.append("g") 
 
     .attr("class", "y axis") 
 
     .call(yAxis) 
 
    .append("text") 
 
     .attr("transform", "rotate(-90)") 
 
     .attr("y", 6) 
 
     .attr("dy", ".71em") 
 
     .style("text-anchor", "end") 
 
     .text("Price ($)"); 
 

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

body { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path, 
 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.x.axis path { 
 
    display: none; 
 
} 
 

 
.line { 
 
    fill: none; 
 
    stroke: steelblue; 
 
    stroke-width: 1.5px; 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script>