錯誤：使用JSON數據解析D3.js多行圖形上的d =「MNaN，260L

我試圖用此圖顯示至少一行圖形，希望稍後再添加一行圖形。得到任何東西，雖然，當這個命中線return line(d.values);我得到Error: parsing d="MNaN,260L...一堆線我開始與this example，我的數據結構是相同的，在那個例子中，我保留所有的變量名稱，當我執行console.log（市），我的結構是一樣的想法錯誤：使用JSON數據解析D3.js多行圖形上的d =「MNaN，260L

cities VAR樣子：？

[ 
    {name:"count", values: [{date:1, temperature: 10}, {date:1, temperature: 10}]} 
]

JS鱈魚e看起來像：

var margin = {top: 20, right: 0, bottom: 20, left: 20}, 
        width = 600 - margin.left - margin.right, 
        height = 300 - margin.top - margin.bottom; 

       var parseDate = d3.time.format("%Y%m%d").parse; 

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

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

       var color = d3.scale.category10(); 

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

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

       var line = d3.svg.line() 
        .interpolate("basis") 
        .x(function(d) { 
         console.log(d) 
         return x(d.date); 
        }) 
        .y(function(d) { 
         return y(d.temperature); 
        }); 

       var svg = d3.select(".heartbeat").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("/static/data/test.json", function(error, data) { 
        color.domain(["one"]); 

        function get_vs(){ 
         a = [] 
         $.each(data, function(k, v){ 
          if(v.hasOwnProperty("CN")){ 
           a.push({"date": new Date(), "temperature": v.CN.count}) 
          }else{ 
           a.push({"date": new Date(), "temperature": 0}) 
          } 
         }) 
         return a 
        } 

        var cities = [ 
         { 
          name: "count", 
          values: get_vs() 
         } 
        ] 

        x.domain(d3.extent(data, function(d) { return d.date; })); 

        y.domain([ 
        d3.min(cities, function(c) { return d3.min(c.values, function(v) { return v.temperature; }); }), 
        d3.max(cities, function(c) { return d3.max(c.values, function(v) { return v.temperature; }); }) 
        ]); 

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

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

        var city = svg.selectAll(".city") 
         .data(cities) 
        .enter().append("g") 
         .attr("class", "city"); 

        city.append("path") 
         .attr("class", "line") 
         .attr("d", function(d) { 
         return line(d.values); 
         }) 
         .style("stroke", function(d) { return color(d.name); }); 
       });

來源

2014-02-20 L-R

它看起來像你所有的日期都相同，所以X標尺的程度將是0 –

你是對的 - 但是會導致解析錯誤？要試一試，以確保... –

那麼規模將返回NaN。規模返回的是路徑字符串的一部分，而NaN是非法的。 –

數據只是需要一點適應 - 原始代碼期待的對象數組。

data = [] 
d3.json("/static/data/test.json", function(error, json_data) { 
    $.each(json_data, function(k, v){        
     a = {count: count, avg: avg, date: date} 
     data.push(a) 
    }) 
})

來源

2014-02-21 15:50:31

錯誤：使用JSON數據解析D3.js多行圖形上的d =「MNaN，260L

回答

相關問題