5

私が取り組んでいる Web アプリケーションには、次のようなオブジェクトの配列を返す REST インターフェイスがあります。

[{"id":110, "time":1360580745797, "userName":"pinky", "activity":"respawn"},
{"id":111, "time":1360580745797, "userName":"perky", "activity":"change direction"},
{"id":112, "time":1360580745797, "userName":"clyde", "activity":"caught pacman"},
{"id":113, "time":1360580745797, "userName":"perky", "activity":"respawn"},
{"id":114, "time":1360580745797, "userName":"perky", "activity":"caught pacman"},
{"id":115, "time":1360580745797, "userName":"clyde", "activity":"respawn"}]

データを使用して、アクティビティごとに線があり、各日のアクティビティの合計を示す折れ線グラフをレンダリングしたいと思います。ID は使用されず、この段階では userName は使用されません (ただし、後でユーザー名で結果をフィルタリングする可能性があります)。

map reduce 関数を使用してデータをソートする方法を見てきましたが、それ以来D3 のネスト機能を使用しようとしています。

現在、次のようなコードがいくつかあります。

d3.json(url, function(error, json) {
    if (error) return console.warn(error);

    console.log(json);

    d3.nest()
        .key(function(d) { return d.activity; })
        .key(function(d) {return d3.time.format('%x')(new Date(d.time));})
        .entries(json);

};

これにより、JSON データがアクティビティによってキー付けされたオブジェクトの配列にグループ化され、次に日付によってキー付けされます。次に、その日の活動量を合計する必要があります。

ここから、データを d3 折れ線グラフで使用できる形式にする方法が完全にはわかりません。

4

2 に答える 2

5

以下は解決策です。d3 url を変更する必要があるかもしれませんが、それ以外の場合は機能するはずです。

問題: 1 日のアクティビティがない場合、行に「0」として表示されません。それらはスキップされます。ゼロ値を挿入する方がおそらく良いでしょう。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Demo: SVG with data</title>
<script type="text/javascript" src="js/d3.v3.js"></script>
<style type="text/css">

body { font: 10px sans-serif;}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.line {
  fill: none;  stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">

var dataset = [{"id":110, "time":1360580745797, "userName":"pinky", "activity":"respawn"},
               {"id":111, "time":1360580745798, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1360580745799, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1360580745797, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1361580745797, "userName":"perky", "activity":"change direction"},
               {"id":111, "time":1361580745798, "userName":"perky", "activity":"change direction"},
               {"id":112, "time":1360580745797, "userName":"clyde", "activity":"caught pacman"},
               {"id":113, "time":1360580745797, "userName":"perky", "activity":"respawn"},
               {"id":114, "time":1360580745797, "userName":"perky", "activity":"caught pacman"},
               {"id":114, "time":1361580745797, "userName":"perky", "activity":"caught pacman"},
               {"id":114, "time":1362580745797, "userName":"perky", "activity":"caught pacman"},
               {"id":114, "time":1363580745797, "userName":"perky", "activity":"caught pacman"},
               {"id":110, "time":1361580745797, "userName":"pinky", "activity":"respawn"},
               {"id":115, "time":1360580745797, "userName":"clyde", "activity":"respawn"}]


var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range( [height,0] );

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var color = d3.scale.category10();

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var dateFormat = d3.time.format("%x");

var nestedData = d3.nest()
    .key(function(d) { return d.activity; })
    .key(function(d) {return dateFormat(new Date(d.time));})
    .entries(dataset);

drawMainGraph();

function drawMainGraph() {

    var line = d3.svg.line()
        .interpolate("linear")
        .x( function(d) {return x(dateFormat.parse(d.key)) } )
        .y( function(d) {return y(d.values.length) } );

    x.domain( d3.extent( dataset, function(d) { return new Date(d.time) } ) );
    y.domain( [ 0, d3.max( nestedData, function(d) { return d.values.length } ) ]);

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis)
      .append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text("Count");


    var activityLine = svg.selectAll(".activity")
      .data( nestedData )
      .enter()
        .append("g")
        .attr("class", "activity")
        .attr("id", function(d) { return "activity-" + d.key } );

    activityLine.append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); } )
      .style("stroke", function(d) { return color(d.key); } );
}

</script>
</body>
</html>
于 2013-02-26T18:04:32.573 に答える
1

値の配列ではなくオブジェクトを扱っていたという事実が、いくつかの複雑さを引き起こしていました。

主な問題の 1 つは、最小値と最大値を正確に取得することでした。データを並べ替えた後、次を使用してこれを回避できました。

var min = d3.min(nestedData, function(datum) {
    return d3.min(datum.values, function(d) { return d.values.length; });
}),
max = d3.max(nestedData, function(datum) {
    return d3.max(datum.values, function(d) { return d.values.length; });
});

私が抱えていたもう1つの問題は、私が扱っているデータが常に存在するとは限らないということでした. 接続先の Web アプリケーションに新しいアクティビティが追加されると、折れ線グラフは x 軸に沿った点から始まるデータを処理できる必要があります。

@cmonkey のコードの一部を使用して動作するようになりました

私が投げたあらゆる量のデータを処理するようです。少数のデータを選択すると、次のようになります。

ここに画像の説明を入力

次のステップは、時間の特定のセクションへのズームインを処理することです。現在、すべてのアクティビティ (約 4 か月前までさかのぼる) を表示しているため、グラフをより使いやすくするには、特定の月または週を選択できるようにする必要があります。

于 2013-03-06T16:57:19.243 に答える