3

我有这个 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）“月”。我想返回所选参数类型在所选月份内每一天的平均/平均读数。

不知道我如何在 D3 中做到这一点 - 但认为它可能类似于：

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

不知道我是否完全不合时宜 - 或者我怎么能做到这一点？

更新： 

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

1 回答 1

4

您正在寻找的是标准的 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() 一月为 0，十二月为 11，所以我必须从 selectedMonth 中减去一个才能得到正确的比较。

于 2013-03-02T04:40:20.820 回答