12

d3.js次のようにラインジェネレーターを定義しました。

var line = d3.svg.line()
    .interpolate("monotone")
    .x(function(d) {return x(d.date); })
    .y(function(d) {return y0(d.visits); });

データは、次の形式の csv から読み取られます。

date,visits
12/08/12,1
13/08/12,0
14/08/12,0
15/08/12,33
16/08/12,28

csv ファイルは にロードされdata、次のように解析されます。

data.forEach(function(d) {
    d.date = d3.time.format("%d/%m/%y").parse(d.date);
    d.visits = +d.visits;
});

そして次のようにドキュメントに追加されました：

svg.append("path")
    .datum(data)
    .attr("class", "line")
    .attr("d", line)

スクリプトの別の場所で、特定の日付の y 値を調べる必要があります。たとえば、日付がある行の y 値を取得したい場合があります15/08/12( に相当y0(33))。これどうやってするの？

4

2 に答える 2

12

を使用bisectして配列内の日付を検索し、y0関数を呼び出すことができます。コードは次のようになります (ドキュメンテーションからほぼそのまま引用)。

var bisect = d3.bisector(function(d) { return d.date; }).right;
...   
var item = data[bisect(data, new Date(2012, 8, 15))];
y0(item.visits);

このアプローチでは、サンプル データにある日付を並べ替える必要があることに注意してください。

于 2013-04-26T15:09:50.803 に答える