0

我正在尝试使用 D3 创建多线图，但我一直遇到相同的错误

错误：解析问题 d="MNaN,450LNaN,0LNaN,450LNaN,450LNaN,0LNaN,0"

当我尝试绘制我的线时，这似乎发生了：

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

我正在尝试使用以下数据集绘制一条线：

  {"name":"application_active_users","values":[{"value":0,"end_time":"2013-06-14T11:00:00.000Z"},{"value":1,"end_time":"2013-06-15T11:00:00.000Z"},{"value":0,"end_time":"2013-06-16T11:00:00.000Z"},{"value":0,"end_time":"2013-06-17T11:00:00.000Z"},{"value":1,"end_time":"2013-06-18T11:00:00.000Z"},{"value":1,"end_time":"2013-06-19T11:00:00.000Z"}]}

我假设我的数据源有问题。有没有人看到我的数据源设置的直接问题？

这是 D3 代码的一部分。整个代码在这里http://jsfiddle.net/hy4Hz/。

 var payload;
 var storedMetrics = [];
 var metricCount = 1;
 var graphData = [];

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

 //var parseDate = d3.time.format("%Y-%m-%d").parse;
 //var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%SZ").parse;
 var parseDate = d3.time.format("%Y-%m-%dT%H:%M:%S").parse;
 var color = d3.scale.category10();

 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 line = d3.svg.line()
     .x(function (d) {
     return x(d.end_time);
 })
     .y(function (d) {
     return y(d.value);
 });

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

 x.domain(d3.extent(

 data, function (d) {
     return d.end_time;
 }));

 y.domain([
 d3.min(metrics, function (c) {
     return d3.min(c.values, function (v) {
         return v.value;
     });
 }),
 d3.max(metrics, function (c) {
     return d3.max(c.values, function (v) {
         return v.value;
     });
 })]);

 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("Temperature (ºF)");

 var city = svg.selectAll(".city")
     .data(metrics)
     .enter().append("g")
     .attr("class", "city");

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

 city.append("text")
     .datum(function (d) {
     return {
         name: d.name,
         value: d.values[d.values.length - 1]
     };
 })
     .attr("transform", function (d) {
     return "translate(" + x(d.value.end_time) + "," + y(d.value.value) + ")";
 })
     .attr("x", 3)
     .attr("dy", ".35em")
     .text(function (d) {
     return d.name;
 });
4

1 回答 1

1

看起来您的x.domain()设置可能不正确。的第一个参数d3.extent应该是data.values。

于 2013-06-20T18:33:42.983 回答