Question

我无法在d3.js中绘制线图，我写了一些代码但是启用了显示图，如何为给定数据绘制一条线。我有一个问题，如何解析数据为给定数据并为给定的代码数据绘制一条线。

var data=[{"key":[2000,1,1,12],"value":1000},{"key":[2000,2,1,12],"value":38965},
[{"key":[2000,7,1,24],"value":289},{"key":[2000,8,1,24],"value":389}
]

    var parseDate = d3.time.format("%Y.%m.%d.%H").parse;
        var map=data.map(function (d){
      return {
      key:parseDate((d.key[0])+"."+(d.key[1]+1)+"."+(d.key[2])+"."+(d.key[3]+1)),value:+d.value
       }
       });
console.log(map);

var margin = {top: 15, right: 20, bottom: 70, left: 85},
        width = 440,height = 450;
     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.key); })
       .y(function(d) { return y(d.value); })
       .interpolate("cardinal")
      var svg = d3.select("body").select("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(d3.map(function (d){return d.key;})));
       y.domain(d3.extent(d3.map(function (d){return d.key;})));
       svg.append("g")
      .attr("class", "x axis x-axis")
      .attr("transform", "translate(0," + height + ")").attr("fill","steelblue")
      .call(xAxis);
      svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis)
      svg.append("path").datum(map).attr("class", "line").attr("d", line);

Answer 1

上述代码似乎存在许多问题，包括[中的额外data，应该是：

var data=[
  {"key":[2000,1,1,12],"value":1000},
  {"key":[2000,2,1,12],"value":38965},
  {"key":[2000,7,1,24],"value":289},
  {"key":[2000,8,1,24],"value":389}
]

除此之外，解析数据的方式似乎很好，但是设置图表的方式存在一些问题。

我在这里使用您的数据创建了一个新的折线图：http://jsfiddle.net/henbox/9etp0xap/，基于此示例：http://bl.ocks.org/mbostock/3883245

您可能会发现修改jsfiddle更容易，而不是调试特定问题。

如何在d3.js中给定数据中设计图形

1 个答案: