如何为时间序列设置刻度，当前x刻度给我NaN？

时间：2018-11-17 18:13:22

标签： d3.js

我使用的d3代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

svg {
  font: 10px sans-serif;
}


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

.y.axis path {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.brush .extent {
  stroke: #fff;
  fill-opacity: .125;
  shape-rendering: crispEdges;
}

.line {
  fill: none;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 10, right: 10, bottom: 100, left: 40},
    margin2 = {top: 430, right: 10, bottom: 20, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom,
    height2 = 500 - margin2.top - margin2.bottom;

var color = d3.scale.category10();

var parseDate = d3.time.format("%d %b %Y").parse;

var x = d3.time.scale().range([0, width]),
    x2 = d3.time.scale().range([0, width]),
    y = d3.scale.linear().range([height, 0]),
    y2 = d3.scale.linear().range([height2, 0]);

var xAxis = d3.svg.axis().scale(x).orient("bottom"),
    xAxis2 = d3.svg.axis().scale(x2).orient("bottom"),
    yAxis = d3.svg.axis().scale(y).orient("left");

var brush = d3.svg.brush()
    .x(x2)
    .on("brush", brush);

var line = d3.svg.line()
    .defined(function(d) { return !isNaN(d.points); })
    .interpolate("cubic")
    .x(function(d) { return x(d.Date); })
    .y(function(d) { return y(d.points); });

var line2 = d3.svg.line()
    .defined(function(d) { return !isNaN(d.points); })
    .interpolate("cubic")
    .x(function(d) {return x2(d.Date); })
    .y(function(d) {return y2(d.points); });

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

svg.append("defs").append("clipPath")
    .attr("id", "clip")
  .append("rect")
    .attr("width", width)
    .attr("height", height);

var focus = svg.append("g")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var context = svg.append("g")
  .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")");

d3.csv("nifty_50_data.csv", function(error, data) {
  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Date"; }));

  data.forEach(function(d) {
    // debugger;
    d.Date = parseDate(d.Date);
    d.Open = parseFloat(d.Open);
    d.High = parseFloat(d.High);
    d.Low = parseFloat(d.Low);
    d.Close = parseFloat(d.Close);
  });
  // console.log(data);
  var sources = color.domain().map(function(name) {
      return {
        name: name,
        values: data.map(function(d) {
          return {date: d.Date, points: +d[name]};
        })
      };
    });
    console.log(sources);
    x.domain(d3.extent(data, function(d) { return d.Date; }));
    y.domain([d3.min(sources, function(c) { return d3.min(c.values, function(v) { return v.points; }); }),
              d3.max(sources, function(c) { return d3.max(c.values, function(v) { return v.points; }); }) ]);
    x2.domain(x.domain());
    y2.domain(y.domain());

    var focuslineGroups = focus.selectAll("g")
        .data(sources)
      .enter().append("g");

    var focuslines = focuslineGroups.append("path")
        .attr("class","line")
        .attr("d", function(d) { return line(d.values); })
        .style("stroke", function(d) {return color(d.name);})
        .attr("clip-path", "url(#clip)");

    focus.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    focus.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    var contextlineGroups = context.selectAll("g")
        .data(sources)
      .enter().append("g");

    var contextLines = contextlineGroups.append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line2(d.values); })
        .style("stroke", function(d) {return color(d.name);})
        .attr("clip-path", "url(#clip)");

    context.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height2 + ")")
        .call(xAxis2);

    context.append("g")
        .attr("class", "x brush")
        .call(brush)
      .selectAll("rect")
        .attr("y", -6)
        .attr("height", height2 + 7);


});

function brush() {
  x.domain(brush.empty() ? x2.domain() : brush.extent());
  focus.selectAll("path.line").attr("d",  function(d) {return line(d.values)});
  focus.select(".x.axis").call(xAxis);
  focus.select(".y.axis").call(yAxis);
}

</script>

数据：

Date,Open,High,Low,Close
16 Nov 2018,10644.00,10695.15,10631.15,10682.20
15 Nov 2018,10580.60,10646.50,10557.50,10616.70
14 Nov 2018,10634.90,10651.60,10532.70,10576.30
13 Nov 2018,10451.90,10596.25,10440.55,10582.50
12 Nov 2018,10607.80,10645.50,10464.05,10482.20
09 Nov 2018,10614.70,10619.55,10544.85,10585.20
07 Nov 2018,10614.45,10616.45,10582.30,10598.40
06 Nov 2018,10552.00,10600.25,10491.45,10530.00
05 Nov 2018,10558.75,10558.80,10477.00,10524.00
02 Nov 2018,10462.30,10606.95,10457.70,10553.00
01 Nov 2018,10441.70,10441.90,10341.90,10380.45
31 Oct 2018,10209.55,10396.00,10105.10,10386.60
30 Oct 2018,10239.40,10285.10,10175.35,10198.40
29 Oct 2018,10078.10,10275.30,10020.35,10250.85
26 Oct 2018,10122.35,10128.85,10004.55,10030.00
25 Oct 2018,10135.05,10166.60,10079.30,10124.90
24 Oct 2018,10278.15,10290.65,10126.70,10224.75
23 Oct 2018,10152.60,10222.10,10102.35,10146.80
22 Oct 2018,10405.85,10408.55,10224.00,10245.25
19 Oct 2018,10339.70,10380.10,10249.60,10303.55
17 Oct 2018,10688.70,10710.15,10436.45,10453.05
16 Oct 2018,10550.15,10604.90,10525.30,10584.75
15 Oct 2018,10524.20,10526.30,10410.15,10512.50
12 Oct 2018,10331.55,10492.45,10322.15,10472.50
11 Oct 2018,10169.80,10335.95,10138.60,10234.65
10 Oct 2018,10331.85,10482.35,10318.25,10460.10
09 Oct 2018,10390.30,10397.60,10279.35,10301.05
08 Oct 2018,10310.15,10398.35,10198.40,10348.05
05 Oct 2018,10514.10,10540.65,10261.90,10316.45
04 Oct 2018,10754.70,10754.70,10547.25,10599.25
03 Oct 2018,10982.70,10989.05,10843.75,10858.25
01 Oct 2018,10930.90,11035.65,10821.55,11008.30
28 Sep 2018,11008.10,11034.10,10850.30,10930.45
27 Sep 2018,11079.80,11089.45,10953.35,10977.55
26 Sep 2018,11145.55,11145.55,10993.05,11053.80
25 Sep 2018,10969.95,11080.60,10882.85,11067.45
24 Sep 2018,11164.40,11170.15,10943.60,10967.40
21 Sep 2018,11271.30,11346.80,10866.45,11143.10
19 Sep 2018,11326.65,11332.05,11210.90,11234.35
18 Sep 2018,11381.55,11411.45,11268.95,11278.90
17 Sep 2018,11464.95,11464.95,11366.90,11377.75
14 Sep 2018,11443.50,11523.25,11430.55,11515.20
12 Sep 2018,11340.10,11380.75,11250.20,11369.90
11 Sep 2018,11476.85,11479.40,11274.00,11287.50
10 Sep 2018,11570.25,11573.00,11427.30,11438.10
07 Sep 2018,11558.25,11603.00,11484.40,11589.10
06 Sep 2018,11514.15,11562.25,11436.05,11536.90
05 Sep 2018,11514.85,11542.65,11393.85,11476.95
04 Sep 2018,11598.75,11602.55,11496.85,11520.30
03 Sep 2018,11751.80,11751.80,11567.40,11582.35
31 Aug 2018,11675.85,11727.65,11640.10,11680.50
30 Aug 2018,11694.75,11698.80,11639.70,11676.80
29 Aug 2018,11744.95,11753.20,11678.85,11691.90
28 Aug 2018,11731.95,11760.20,11710.50,11738.50
27 Aug 2018,11605.85,11700.95,11595.60,11691.95
24 Aug 2018,11566.60,11604.60,11532.00,11557.10
23 Aug 2018,11620.70,11620.70,11546.70,11582.75
21 Aug 2018,11576.20,11581.75,11539.60,11570.90
20 Aug 2018,11502.10,11565.30,11499.65,11551.75
17 Aug 2018,11437.15,11486.45,11431.80,11470.75

x比例尺返回NaN值，我只绘制了坐标轴，而不是直线。

有人可以指出我在这里做错了吗...

谢谢。

1 个答案:

答案 0 :(得分：1)

问题出在line和line2 x函数中，您在其中使用d.Date作为参数，但是在source对象中用小写键定义了日期。

var line = d3.svg.line()
    .defined(function(d) { return !isNaN(d.points); })
    .interpolate("cubic")
    .x(function(d) { return x(d.date); }) // <-- change to lowercase date
    .y(function(d) { return y(d.points); });

var line2 = d3.svg.line()
    .defined(function(d) { return !isNaN(d.points); })
    .interpolate("cubic")
    .x(function(d) {return x2(d.date); }) // <-- change to lowercase date
    .y(function(d) {return y2(d.points); });
相关问题
最新问题