javascript - D3.js : Line Generation with dates

Question

我今天正在做一个项目，遇到了一个问题，因为它是 javascript，所以我不完全确定错误发生在哪里。我正在使用 D3 库来创建图表，但我对此的经验很少。

目标是在折线图中显示给定时间段内的血糖数据。现在我对其进行了硬编码，以便它应该显示最近 2 天(x 轴)，并且读数范围在 0-300 之间(y 轴)。 x 轴和 y 轴显示出来，但是当我尝试绘制一条线(创建一条路径)时，没有显示任何内容。

JavaScript 如下:

var vis = d3.select("#visualisation"),
    WIDTH= 1000,
    HEIGHT = 500,
    START = new Date(2015, 2, 16, 0, 0),        //static start date
    END = new Date(2015, 2, 18, 0, 0),      //static end date
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },

    xScale = d3.time.scale().range([MARGINS.left, WIDTH - MARGINS.right]).domain([START,END]),
    yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([0,300]),

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

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

    vis.append("svg:g")         //append x-axis
        .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")        //repositions the x-axis lower
        .call(xAxis);

    vis.append("svg:g")         //append y-axis
        .attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

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

    var logs = [];          //empty array
      $.get( "show/log", function( data ) {
            $.each(data, function(index, value) {
                console.log(value);
                logs.push({"BG" : value["bg"], "datetime" : new Date(value["date"] + "T" + value["time"]) });
                console.log(logs);
            }); 
    vis.append('svg:path')
        .attr('d', lineGen(logs))
        .attr('stroke', 'green')
        .attr('stroke-width', 2)
        .attr('fill', 'none');

      });

此外，在有人询问之前，在我将“logs”传递给“lineGen”之前，“logs”是一个有效的对象数组。

logs: [ 
    { BG: "276", datetime: Mon Feb 16 2015 13:52:00 GMT-0500 (Eastern Standard Time) },
    { BG: "211", datetime: Mon Feb 16 2015 16:21:00 GMT-0500 (Eastern Standard Time) },
    { BG: "109", datetime: Mon Feb 16 2015 17:55:00 GMT-0500 (Eastern Standard Time) },
    { BG: "96", datetime: Mon Feb 16 2015 18:39:00 GMT-0500 (Eastern Standard Time) },
    { BG: "150", datetime: Tue Feb 17 2015 06:49:00 GMT-0500 (Eastern Standard Time) },
    { BG: "194", datetime: Tue Feb 17 2015 07:54:00 GMT-0500 (Eastern Standard Time) }
]

而且，如果我在执行后检查页面，该路径位于页面中，但似乎在屏幕外？还是隐藏？

<path d="M-12681.958333333334,56.79999999999998L-12633.84375,156.46666666666664L-12603.489583333334,312.8666666666667L-12589.28125,332.79999999999995L-12353.552083333334,250L-12332.5625,182.53333333333336" stroke="green" stroke-width="2" fill="none"></path>

有什么想法吗？

Answer 1

好的，我已经从您的代码中创建了一个片段并纠正了一些问题，请尝试一下:

var vis,
    START = new Date(2015, 1, 16, 0, 0),        //static start date
    END = new Date(2015, 1, 18, 0, 0),      //static end date
    MARGINS = {
               top: 20,
               right: 20,
               bottom: 20,
               left: 50
              },
    WIDTH = 1000 - MARGINS.left - MARGINS.right,
    HEIGHT = 500 - MARGINS.top - MARGINS.bottom,

    logs = [ 
             { BG: "276", datetime: "Mon Feb 16 2015 13:52:00 GMT-0500 (Eastern Standard Time)" },
             { BG: "211", datetime: "Mon Feb 16 2015 16:21:00 GMT-0500 (Eastern Standard Time)" },
             { BG: "109", datetime: "Mon Feb 16 2015 17:55:00 GMT-0500 (Eastern Standard Time)" },
             { BG: "96",  datetime: "Mon Feb 16 2015 18:39:00 GMT-0500 (Eastern Standard Time)" },
             { BG: "150", datetime: "Tue Feb 17 2015 06:49:00 GMT-0500 (Eastern Standard Time)" },
             { BG: "194", datetime: "Tue Feb 17 2015 07:54:00 GMT-0500 (Eastern Standard Time)" }
           ],    

    xScale = d3.time.scale().range([0, WIDTH]).domain([START,END]),
    yScale = d3.scale.linear().range([HEIGHT, 0]).domain([0,300]),

    xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom"),

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

    vis = d3.select("#visualisation").append("svg")
              .attr("width", WIDTH + MARGINS.left + MARGINS.right)
              .attr("height", HEIGHT + MARGINS.top + MARGINS.bottom)
            .append("g")
              .attr("transform", "translate(" + MARGINS.left + "," + MARGINS.top + ")");

    vis.append("svg:g")         //append x-axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + HEIGHT + ")")        //repositions the x-axis lower
        .call(xAxis);

    vis.append("svg:g")         //append y-axis
        .attr("class", "y axis")
        //.attr("transform", "translate(" + (MARGINS.left) + ",0)")
        .call(yAxis);

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

    /*
    var logs = [];          //empty array
      $.get( "show/log", function( data ) {
      $.each(data, function(index, value) {
      console.log(value);
      logs.push({"BG" : value["bg"], "datetime" : new Date(value["date"] + "T" + value["time"]) });
      console.log(logs);
      }); 
     */ 

    logs.forEach(function(d) {
        d.datetime = new Date(d.datetime);
    });

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

//  });

.axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    .line {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="visualisation"></div>

不同之处:

1. 在 javascript 中，Date 对象的 month 实际上是零引用，即。一月 = 0、二月 = 1 等等...您的 START 和 END 变量实际上设置为 March，这就是您的行具有如此大的负值的原因。

2. 您没有将 svg 元素附加到 DOM，您只是将 g 元素直接粘贴在 div#visualization 元素没有父 svg，因此它们没有显示。

3. 我使用 http://bl.ocks.org/mbostock/3883245 进行了一些其他更改举个例子。特别是，我创建了一个父 g 元素来存储所有图形元素，允许它由 MARGINS.top 和 MARGINS.left< 进行翻译 作为一个完整的实体，这意味着您可以完全忘记它们在 g 元素中的存在，只需引用 0, 0 中的所有内容，从而更容易放置所有 svg 元素.

4. 为轴和线添加了样式，因为默认的 svg 样式通常不存在并且看起来很垃圾。