d3.js - 返回所选值 D3.js 的均值/平均值

Question

我有一个使用 PHP 从 mySQL 数据库以这种格式返回的 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"}...

我有两个下拉列表 - 用户将在其中选择 a) “parameterType”，然后 b) “month”。我想返回所选参数类型所选月份内每一天的平均/平均读数。

不确定如何在 D3 中执行此操作 - 但认为它可能类似于:

• 按参数类型和所选值的月份过滤数据
• return 意思是“阅读”
• 相应地更新图表

但不确定我是否完全偏离了目标 - 或者我什至如何才能做到这一点？

更新:

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

请注意，因为 getMonth() 对于 1 月为 0，对于 12 月为 11，所以我必须从 selectedMonth 中减去一个才能获得正确的比较。