Question

我是D3新手，我在创建简单折线图时遇到问题，x数据是日期。从本地数组x读取Date变量（x）时遇到问题。

问题部分是我对d3.time.format的调用以及返回svg.line函数。

    <title>D3 PATHS 2 tutorial </title>
     <script src="http://d3js.org/d3.v3.min.js"></script>

    </head>

<body>


    <script>

     var lineDataNew = [['2014-07-22 14:00:00',22979.57],['2014-07-22 14:15:00',22980.77],['2014-07-22 14:30:00',22981.99]];  
  var newData = [];
  var newlineData;

  for   (index = 0; index < lineDataNew.length; index++) {
      var strelement =    lineDataNew[index].toString() ;
      var arr = strelement.split(",");
       newlineData = newlineData + "{" + "x:'" + arr[0] + "', y:" + arr[1] + "}"
       newData.push(newlineData);
    if (index < arr.length) {    newlineData = newlineData + ",";   }                   
    }
            newlineData = newlineData + "]";

     var parseDate = d3.time.format("%Y-%m-%d %H:%M:%S").parse;

    var canvas = d3.select("body").append("svg")
      .attr("width", 500)
      .attr("height",500)

    var group = canvas.append("g")
            .attr("transform","translate(100, 100)");

    var line = d3.svg.line()
         .x(function (d) {   return  d3.time.format("%Y-%m-%d %H:%M:%S").parse('2014-07-22 14:15:00'); }  )
          .x(function (d) {  return  d3.time.format("%Y-%m-%d %H:%M:%S").parse(d.x); }  )
     //     .x(function (d) {    return  d.x ; }  )
       .y(function (d) {return d.y;  } )

    group.selectAll("path")
                .data([newData])
                .enter()
                .append("path")
                .attr("d", line)
                .attr("fill", "none")
                .attr("stroke", "#000")
                .attr("stroke-width", 10);

        </script>
    </body>
</html>

带有日期的D3.js数组简单折线图

0 个答案: