Question

我是D3的新手，我正在尝试使用日期来渲染线图的简化示例，但到目前为止还没有骰子。两个轴上的简单整数运行良好，但转向时间尺度打破了它。我一直在阅读很多例子，但显然我缺少一些基本的东西。

另外，我正在使用JSBin进行测试，有人能指出我正确的方向吗？

var h = 100;
var w = 200;

monthlySales = [
  {"month":"2016-01-01", "sales":20},
  {"month":"2016-01-15", "sales":14},
  {"month":"2016-02-10", "sales":20},
  {"month":"2016-03-15", "sales":60}
];

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]);

var lineFun = d3.svg.line()
  .x(function(d) {return x(getDate(d));})
  .y(function(d) {return h-d.sales;})
  .interpolate("linear");


var svg = d3.select("body").append("svg").attr({
  width:w, height:h
});

var viz = svg.append("path")
  .attr({
    d: lineFun(monthlySales),
    "stroke": "purple",
    "stroke-width": 2,
    "fill": "none"
  });

function getDate(d) {
    var d2 = d3.time.format("%Y-%m-%d").parse(d.month);
    return new Date(d2);
};

// get max and min dates - this assumes data is sorted
var minDate = getDate(monthlySales[0]),
    maxDate = getDate(monthlySales[monthlySales.length-1]);

Answer 1

正在使用该点不存在的起始值和结束值设置比例的域。它不会抛出未设置minDate和maxDate的错误，因为变量声明被提升到顶部。如果你移动

// get max and min dates - this assumes data is sorted
var minDate = getDate(monthlySales[0]),
    maxDate = getDate(monthlySales[monthlySales.length-1]);

之前

var x = d3.time.scale().domain([minDate, maxDate]).range([0, w]);

它应该有用。 Codepen example

使用时间刻度时D3图形无法渲染

1 个答案: