Question

我试图创建一个d3折线图。我在下面的教程中生成了图表，并提供了示例数据，但是当我插入数据时，图表不会产生线条，x轴也没有任何值。

我想这与x轴是日期/格式有关（我也可能决定只做一个月和一年），但我花了几天时间试图弄清楚如何做什么。

Here is a jsfiddle再现问题。产生一条线的教程数据被注释掉了。我的数据存储在数据变量中。

知道发生了什么事吗？

       var data = [{
            "date":"January 1, 2008","total":'33'},
            {"date":"February 1, 2008","total":'40'},
            {"date":"March 1, 2008","total":'46'},
            {"date":"April 1, 2008","total":'281'},
            {"date":"May 1, 2008","total":'354'},
            {"date":"June 1, 2008","total":'620'},
            {"date":"July 1, 2008","total":'368'},
            {"date":"August 1, 2008","total":'323'}];


            var chart = d3.select('#chartCanvas'),
                    WIDTH=1000,
                    HEIGHT=500,
                    MARGINS= {
                        top:20,
                        right: 20,
                        bottom: 20,
                        left: 50
                     };

            //THIS DOES NOT WORK
            // var parseDate = d3.time.format("%d-%b-%y").parse;    
            //  data.forEach(function(d) {
            //  d.date = Date(parseDate(d.date))
              //});

            xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return d.date; }));

            yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);



                xAxis = d3.svg.axis()
                .scale(xScale),

                yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");



                chart.append("svg:g")
                .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
                .call(xAxis);

                chart.append("svg:g")
                .attr("transform", "translate(" + (MARGINS.left) + ",0)")
                .call(yAxis);


               var lineGen = d3.svg.line()
                .x(function(d) {
                    return xScale(d.date);
                })
                .y(function(d) {
                    return yScale(d.total);
                });

               chart.append('svg:path')
                  .attr('d', lineGen(data))
                  .attr('stroke', 'green')
                  .attr('stroke-width', 2)
                  .attr('fill', 'none');

Answer 1

日期是字符串，但D3需要某种数字（日期也是如此）。在代码中的两个版本中将d.date更改为new Date(d.date)即可：http://jsfiddle.net/mmpe5hj1/1/

＆＃13;

// THIS DATA SET PRODUCES LINES
/* 
var data = [{
    "total": "202",
    "date": "2000"
}, {
    "total": "215",
    "date": "2001"
}, {
    "total": "179",
    "date": "2002"
}, {
    "total": "199",
    "date": "2003"
}, {
    "total": "134",
    "date": "2003"
}, {
    "total": "176",
    "date": "2010"
}];

*/

//THIS DATA SET DOES NOT PRODUCE LINES OR X AXIS LABELS

var data = [{
"date":"January 1, 2008","total":'33'},
{"date":"February 1, 2008","total":'40'},
{"date":"March 1, 2008","total":'46'},
{"date":"April 1, 2008","total":'281'},
{"date":"May 1, 2008","total":'354'},
{"date":"June 1, 2008","total":'620'},
{"date":"July 1, 2008","total":'368'},
{"date":"August 1, 2008","total":'323'}];


var chart = d3.select('#chartCanvas'),
        WIDTH=1000,
        HEIGHT=500,
        MARGINS= {
            top:20,
            right: 20,
            bottom: 20,
            left: 50
         };

//THIS DOES NOT WORK
// var parseDate = d3.time.format("%d-%b-%y").parse;    
//  data.forEach(function(d) {
//  d.date = Date(parseDate(d.date))
  //});
    
xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain(d3.extent(data, function(d) { return new Date(d.date); }));
    
yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([1, d3.max(data, function(d) { return d.total; })]);
    

    
    xAxis = d3.svg.axis()
    .scale(xScale),
  
    yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");
    
    
    
    chart.append("svg:g")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);
    
    chart.append("svg:g")
    .attr("transform", "translate(" + (MARGINS.left) + ",0)")
    .call(yAxis);
    
    
   var lineGen = d3.svg.line()
    .x(function(d) {
        return xScale(new Date(d.date));
    })
    .y(function(d) {
        return yScale(d.total);
    });
    
   chart.append('svg:path')
      .attr('d', lineGen(data))
      .attr('stroke', 'green')
      .attr('stroke-width', 2)
      .attr('fill', 'none');

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="main_content">
    <div class="chart">
      <!--Create SVG canvas -->
      <svg id="chartCanvas" width="1000" height="500">
      </svg>
     

    </div>
    
</div>

＆＃13;

D3不在线图上绘制数据

1 个答案: