Question

我正在尝试通过模仿此example来创建时间序列图：我的数据包含一天，但有一些像这样的值的快照...

{
  "id": "MT_OUT_total",
  "values": [
    {
      "date": 1483530026,
      "val": 10
    },
    {
      "date": 1483530027,
      "val": 1
    },
    {
      "date": 1483529996,
      "val": 14
    },
    {
      "date": 1483529997,
      "val": 22
    },
    {
      "date": 1483529998,
      "val": 22
    },
    {
      "date": 1483529999,
      "val": 6
    },
    {
      "date": 1483530000,
      "val": 0
    },
    {
      "date": 1483530001,
      "val": 11
    },
    {
      "date": 1483530002,
      "val": 5
    },
    {
      "date": 1483530003,
      "val": 3
    }
  ]
}

当我运行程序时，我只获取轴和标签，而不是线图本身。所以，我检查了元素检查器，它显示了svg line命令非常大的值，它超出了SVG矩形的范围（如图中所示）。您可以在图片中看到路径的移动命令＆＃34; M＆＃34;有一个巨大的x坐标值，即日期（例如：d =＆＃34; M1483530026000,159.0909090909091L1483530026166.6667,135.22727272727272C1483530026333.3333 ....）

看起来，我在正确映射范围和域时出错，但我无法弄清楚我做错了什么。代码如下：

 38   createChart() {
 39     this.ctx = {};
 40 
 41     var el = ReactDOM.findDOMNode(this.refs.d3svg_time_series);
 42     var margin = {top:20, right:80, bottom:30, left:50};
 43     this.ctx.width = this.props.width - margin.left - margin.right;
 44     this.ctx.height = this.props.height - margin.top - margin.bottom;
 45     var svg = d3.select(el).append('svg')
 46           .attr('width', this.props.width)
 47           .attr('height', this.props.height);
 48 
 49     this.ctx.g = svg.append('g')
 50           .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');
 51 
 52     //var parseTime = d3.timeParse("%Y%m%d");
 53     this.ctx.x = d3.scaleTime().range([0, this.ctx.width]);
 54     this.ctx.y = d3.scaleLinear().range([0, this.ctx.height]);
 55     this.ctx.z = d3.scaleOrdinal(d3.schemeCategory10);
 56                            
 57     var ctx = this.ctx;    
 58     this.ctx.line = d3.line()
 59           .curve(d3.curveBasis)
 60           .x(function(d) { 
 61               return d.date; })
 62           .y(function(d) { 
 63               return ctx.y(d.val); });        
 64 
 65   console.log("Created chart.");  
 66   }

 68   draw(ctx) {
 69     // set the input domains for chart
 70     //ctx.x.domain(d3.extent(this.state.data, function(d) {return d.date; }));
 71     var timeSeries = flatten(this.state.data);
 72     ctx.x.domain(d3.extent(timeSeries));
 73     ctx.y.domain([
 74       d3.min(this.state.data, function(item) { return d3.min(item.values, function(v) { return v.val; }); }),
 75       d3.max(this.state.data, function(item) { return d3.max(item.values, function(v) { return v.val; }); })
 76     ]);
 77     ctx.z.domain(this.state.data.map(function(d) { return d.id; }));
 78 
 79     ctx.g.append('g')
 80           .attr('class', 'axis axis--x')
 81           .attr('transform', 'translate(0,' + ctx.height + ')')
 82           .call(d3.axisBottom(ctx.x));

我的问题是： - 将（1483530026,1483529996，...）等域值集映射到（0..width）范围后，不应该在D3范围内创建一个SVG路径。 ..width？

- 我仍然看到带有域值的D3生成行命令。

Answer 1

D3不应该在[0，宽度]范围内创建一个SVG路径吗？

是的，如果您在线路生成器中使用了这样的比例，那么它应该没有。

因此，这个：

this.ctx.line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { 
        return d.date; 
    })
    .y(function(d) { 
        return ctx.y(d.val); 
    });

应该是：

this.ctx.line = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { 
        return ctx.x(d.date); //using the scale here
    })
    .y(function(d) { 
        return ctx.y(d.val); 
    });

d3js timeseries - svg路径有巨大的价值

1 个答案: