3

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"}...

2 つのドロップダウン リストがあります。ユーザーは a) "parameterType" を選択し、次に b) "month" を選択します。選択した parameterType について、選択した月内の各日の平均/平均読み取り値を返したいと思います。

D3でこれを行う方法がわからない-しかし、次のようなものかもしれないと思った:

  • 選択した値の parameterType と月でデータをフィルター処理します
  • 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);   
    }
    });
    });
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() は 1 月が 0、12 月が 11 であるため、適切な比較を行うには selectedMonth から 1 を引く必要があることに注意してください。

于 2013-03-02T04:40:20.820 に答える