返回平均值/平均，用於爲選定值D3.js

Question

我有其在從MySQL數據庫這種格式使用PHP返回此JSON數組：

[{"dateTimeTaken":"2013-02-28 05:04:16","reading":"10.7","parameterType":"Flouride"}, 
{"dateTimeTaken":"2013-02-28 05:04:21","reading":"10.5","parameterType":"Flouride"}, 
{"dateTimeTaken":"2013-02-28 05:04:26","reading":"15.1","parameterType":"pH"}, 
{"dateTimeTaken":"2013-02-28 05:04:31","reading":"4.4","parameterType":"Temperature"}... 

我有兩個下拉列表 - 其中用戶將選擇）「parameterType」然後b）「月」。我想返回所選參數類型的選定月份內每天的平均值/平均值讀數。

不知道我怎麼能在D3做到這一點 - 但認爲它可能是沿着線的東西：由參數類型

• 過濾數據和月所選值
• 回報意味着「讀書」
• 更新圖表相應

不知道如果我完全沒譜雖然 - 或者我可以怎麼連實現這一目標？

UPDATE：

d3.select("#parameterType").on("change", function() { filterData(); }); 

    d3.select("#dateTimeTaken").on("change", function() { filterData(); }); 

    function filterData() 
    { 
     var selectedParameter = document.getElementById("parameterType").value; 
     var selectedMonth = document.getElementById("dateTimeTaken").value; 

     var selectedData = data.filter(function(d) 
     { 
      return d.parameterType == selectedParameter && 
        d.dateTimeTaken.getMonth() == (selectedMonth-1); 
     }); 

     console.log(selectedData);//RETURNING EMPTY ARRAY? 

     mean = d3.mean(selectedData,function(d) { return d.reading}) 

     //UPDATE GRAPH 
     x.domain(d3.extent(data, function(d) { return d.dateTimeTaken; })); 
     y.domain(d3.extent(data, function(d) { return d.reading; })); 

     svg.select("path.line") 
      .attr("d", line(data)); 

     svg.select(".x.axis") 
      .transition() 
      .duration(750) 
      .ease("linear") 
      .call(xAxis); 

     svg.select(".y.axis") 
      .transition() 
      .duration(750) 
      .ease("linear") 
      .call(yAxis); 
    } 
    }); 
    }); 

Answer 1

你所尋找的是標準的JavaScript Array.filter方法：

見https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/filter

對於每一個 「重繪」 你可以創建一個過濾集：

var selectedData = data.filter(function(d) { 
    return d.parameterType == selectedParameter && 
      +d.dateTimeTaken.slice(5,7) == selectedMonth; 
    }) 

和平均可以通過把一個加號（+）在一個變量的變換爲數值嘗試的前面容易地計算

mean = d3.mean(selectedData,function(d) { return +d.reading}) 

請注意。

但是現在您可能會意識到使用字符串格式的日期非常不方便。你可以做任何過濾之前做一些預處理：

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

data.forEach(function(d) { 
    d.reading = +d.reading; // convert to number 
    d.dateTimeTaken = dateFmt.parse(d.dateTimeTaken); // convert to javascript date 
}); 

這裏我使用的d3.time.format功能將字符串轉換成日期一個javascript日期（見https://github.com/mbostock/d3/wiki/Time-Formatting）

在這種情況下，您的過濾器（見上文）會稍有不同：

var selectedData = data.filter(function(d) { 
    return d.parameterType == selectedParameter && 
      +d.dateTimeTaken.getMonth() == (selectedMonth-1); 
    }) 

請注意，由於得到月（）十二月爲0，一月11，我要一個。減去從selectedMonth得到一個適當的比較。