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

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

javascript d3.js

我如何使用D3.js获取Javascript对象数组，并在折线图中使用它们？,javascript,d3.js,Javascript,D3.js,我正在使用的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

我正在使用的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没有被使用，在这个阶段用户名也没有被使用（但是我想在以后过滤用户名的结果）

我看过一个使用map reduce函数对数据进行排序的示例，但后来一直尝试使用

我目前有一些代码看起来有点像这样：

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折线图可以使用的格式。

下面是一个解决方案。您可能需要更改d3 url，但在其他情况下应该可以工作

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


D3演示：带数据的SVG
正文{font:10px无衬线；}
.轴线路径，
.轴线{
填充：无；
行程：#000；
形状渲染：边缘清晰；
}
.线路{
填充：无；笔划宽度：1.5px；
}
var数据集=[{“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”：“catch pacman”}，
{“id”：113，“time”：1360580745797，“userName”：“perky”，“activity”：“respawn”}，
{“id”：114，“time”：1360580745797，“userName”：“perky”，“activity”：“catch pacman”}，
{“id”：114，“time”：1361580745797，“userName”：“perky”，“activity”：“catch pacman”}，
{“id”：114，“time”：1362580745797，“userName”：“perky”，“activity”：“catch pacman”}，
{“id”：114，“time”：1363580745797，“userName”：“perky”，“activity”：“catch pacman”}，
{“id”：110，“time”：1361580745797，“userName”：“pinky”，“activity”：“respawn”}，
{“id”：115，“时间”：1360580745797，“用户名”：“克莱德”，“活动”：“重生”}]
var margin={顶部：20，右侧：80，底部：30，左侧：50}，
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var x=d3.time.scale（）
.范围（[0，宽度]）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）；
var color=d3.scale.category10（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var dateFormat=d3.time.format（“%x”）；
var nestedData=d3.nest（）
.key（函数（d）{返回d.activity；}）
.key（函数（d）{返回日期格式（新日期（d.time））；}）
.条目（数据集）；
drawMainGraph（）；
函数drawMainGraph（）{
var line=d3.svg.line（）
.插入（“线性”）
.x（函数（d）{return x（dateFormat.parse（d.key））}）
.y（函数（d）{返回y（d.values.length）}）；
x、 域（d3.extent（数据集，函数（d）{返回新日期（d.time）}）；
y、 域（[0，d3.max（nestedData，函数（d）{返回d.values.length}）]；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，6）
.attr（“dy”，“.71em”）
.style（“文本锚定”、“结束”）
.文本（“计数”）；
var activityLine=svg.selectAll（“.activity”）
.数据（嵌套数据）
.输入（）
.附加（“g”）
.attr（“类”、“活动”）
.attr（“id”，函数（d）{return“activity-”+d.key}）；
activityLine.append（“路径”）
.attr（“类”、“行”）
.attr（“d”，函数（d）{返回行（d.values）；}）
.style（“笔划”，函数（d）{返回颜色（d.key）；}）；
}

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

主要问题之一是准确获取最小值和最大值。在对我的数据进行排序后，我能够通过以下方法解决这个问题：

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中的一些代码使它工作了

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

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

};

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

感谢您的帖子，但这并不能准确地解决问题。我所做的REST调用返回数千个结果，这些结果立即显示了问题。主要的问题是，由于我已经将数据嵌套在活动和时间上，因此返回正确的m值变得有点棘手