Question

我有以下数据：

   parseDate = d3.time.format("%Y").parse,
   format = d3.time.format("%Y");

  var myData = [
   { dataField: "A", coords: [
    {xCoord: parseDate('1990') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1991') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1992') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1993') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1994') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1995') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1996') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1997') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1998') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1999') , yCoord: Math.random() * 100}
    ]
  },
  { dataField: "B",coords: [
    {xCoord: parseDate('1990') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1991') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1992') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1993') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1994') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1995') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1996') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1997') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1998') , yCoord: Math.random() * 100},
    {xCoord: parseDate('1999') , yCoord: Math.random() * 100}
    ]
  }

我正在尝试使用d3创建折线图。另外，我有代码：

    var data = function (d) { return d.coords; };
    var xValue = function (d) { return d.xCoord; };
    var yValue = function (d) { return d.yCoord; };

我一直在创建我的比例：

    xScale = d3.time.scale()
      .domain([new Date(1988,10,30),new Date(2000,01,30)])
      .range([margin.left, 600 - margin.right]);

然而，我的目标是让我的域名自我调整为最大年份的最小年份（或者甚至在每个方向上延长一年的时间）。但到目前为止，我一直没有成功。我试图使用

    .domain(d3.extent(data, xValue));

但没有运气。我对javascript很新，认为我的挣扎在于我存储数据的方式。任何想法都会很棒。

Answer 1

您可以使用内置的d3.extent函数来获取数组的最小值和最大值。它需要一个数组和一个可选的访问器函数。它将返回一个包含2个值的数组，min和max：

[min, max]

我会尝试

xScale.domain(d3.extent(myData[0].coords, function(d) {return d.xCoord; }));

然后冲洗并重复其他数据标签如果存在大量不同的数据集，您可以在for循环中执行此操作。

在d3中创建时间刻度

1 个答案: