Question

我有这个json数组，它使用PHP从mySQL数据库以这种格式返回：

 [{"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中如何做到这一点 - 但是认为它可能是这样的：

按parameterType和所选值的月份过滤数据
return mean“reading”
相应地更新图表

不确定我是否完全脱离了标记 - 或者我怎么能达到这个目标？

更新：

    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中减去一个以获得正确的比较。

返回选定值D3.js的平均值/平均值

1 个答案: