Question

我正在处理的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函数来对数据进行排序，但之后一直在尝试使用nesting feature of 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折线图可以使用的格式。

Answer 1

以下是一个解决方案。您可能需要更改d3网址，但不应该更改。

问题：如果一天没有活动，则它们不会在行中显示为“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>

Answer 2

我处理对象而不是数组的事实导致了一些复杂性。

其中一个主要问题是准确获取最小值和最大值。在对数据进行排序后，我可以使用以下方法解决这个问题：

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

我遇到的另一个问题是我处理的数据并不总是存在。当新的活动被添加到我连接的Web应用程序时，折线图需要能够从x轴的一个点开始处理数据。

我现在正在使用@cmonkey中的一些代码

它似乎处理了我投入的任何数据量。通过少量数据选择，它看起来有点像这样：

enter image description here

嵌套步骤是处理放大到特定时间段的步骤。我目前显示所有活动（可追溯到大约4个月），因此为了使图表更有用，我需要能够选择特定的月份或周。

如何使用D3.js获取Javascript对象数组在折线图中使用它们？

2 个答案: