从数据对象数组创建折线图

Question

我试图学习D3并且在从数据对象数组创建简单的折线图时遇到问题。

我有一个看起来像这样的数据对象数组......

[
    {date: "03/04/15", rain: "1.2"},
    {date: "03/05/15", rain: "2.3"},
    {date: "03/06/15", rain: "0.0"},
    {date: "03/07/15", rain: "4.2"},
    {date: "03/08/15", rain: "0.3"},
    {date: "03/09/15", rain: "0.0"}
]

我尝试按照创建折线图的simple tutorial，但是当我插入数据时，x轴或线都不会显示。这与日期格式有关吗？

我在JS Bin上有一个例子。

我真的不明白问题所在，请帮忙！

Answer 1

X轴应该是d3.time.scale，因为你的日期属性是字符串，你必须通过做新的Date（）将它转换为正确的Date对象;

Answer 2

@Satyajit是对的。这是一个例子：

＆＃13;

＆＃13;

	var lineData = 	[
						{date: "03/04/15", rain: "1.2"},
						{date: "03/05/15", rain: "2.3"},
						{date: "03/06/15", rain: "0.0"},
						{date: "03/07/15", rain: "4.2"},
						{date: "03/08/15", rain: "0.3"},
						{date: "03/09/15", rain: "0.0"}
					].map(function(d) {
                      return {
                        date: new Date(Date.parse(d.date)),
                        rain: d.rain
                      };
                    });


  var vis = d3.select("#visualisation"),
    WIDTH = 600,
    HEIGHT = 250,
    MARGINS = {
      top: 20,
      right: 20,
      bottom: 20,
      left: 50
    },
    xRange = d3.time.scale()
   .range([MARGINS.left, WIDTH - MARGINS.right])
  .domain([d3.min(lineData, function (d) {
        return d.date;
      }),
      d3.max(lineData, function (d) {
        return d.date;
      })
    ]),

    yRange = d3.scale.linear()
  .range([HEIGHT - MARGINS.top, MARGINS.bottom])
  .domain([d3.min(lineData, function (d) {
        return d.rain;
      }),
      d3.max(lineData, function (d) {
        return d.rain;
      })
    ]),

    xAxis = d3.svg.axis()
      .scale(xRange)
      .tickSize(3),

    yAxis = d3.svg.axis()
      .scale(yRange)
      .tickSize(3)
      .orient("left");

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

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

  var lineFunc = d3.svg.line()
  .x(function (d) {
    return xRange(d.date);
  })
  .y(function (d) {
    return yRange(d.rain);
  })
  .interpolate('linear');

vis.append("svg:path")
  .attr("d", lineFunc(lineData))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");

＆＃13;

<script src="http://d3js.org/d3.v3.min.js"></script>
<svg id="visualisation" width="600" height="400"></svg>	

＆＃13;

＆＃13;

＆＃13;