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

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

d3.js

D3.js带日期的数组简单折线图,d3.js,D3.js,我是一个D3新手，我在创建简单的折线图时遇到了一些问题，其中x数据是一个日期。从本地数组x读取日期变量x时出现问题部分问题是我调用了d3.time.format并返回了svg.line函数我猜，行newlineData=newlineData++{+x:'+arr[0]+'，y:+arr[1]+}newData.pushnewlineData应该向数组中添加一个对象！？它真正做的是添加一个字符串。字符串newlineData越来越长，但它从未像var newlineData=那样初始化；

我是一个D3新手，我在创建简单的折线图时遇到了一些问题，其中x数据是一个日期。从本地数组x读取日期变量x时出现问题

部分问题是我调用了d3.time.format并返回了svg.line函数

我猜，行newlineData=newlineData++{+x:'+arr[0]+'，y:+arr[1]+}newData.pushnewlineData应该向数组中添加一个对象！？它真正做的是添加一个字符串。字符串newlineData越来越长，但它从未像var newlineData=那样初始化；它的结果类似于未定义的{x:'2014-07-22 14:00:00'，y:22979.57}，{x:'2014-07-22 14:15:00'，y:22980.77}，我也不明白：代码以二维数组开始。为什么第一个变量strelement=originalData[index].toString；然后分开。。。。我将尝试几分钟来更新您的代码。您可能想在本网站上查看以2维数组开始的路径行代码示例，因为我正在从jQplot移植数组输出，我不知道我是否可以使用2维数组。D3中的数组。我把它转换成一个JSON对象，但运气不好，然后尝试用我认为D3可以使用的x和y属性构建一个新数组。我将根据您的评论更改代码并重试-谢谢。

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