Question

这个问题有点棘手。我有一些使用以下数据的示例代码。它将其绘制在折线图上。

var dataset = [{
      y: 0.1
    },
    {
      y: 0.6
    },
        {
      y: 0.6
    },
    {
      y: 0.7
    }
  ];

D3使用以下代码将其放置在X轴上：

var xScale = d3.scaleLinear()
.domain([0, n - 1]) // input
.range([0, width]); // output

但是我真的很想得到dat

var dataset = [{
      "1pm": 0.1
    },
    {
      "2pm": 0.6
    },
        {
      "3pm": 0.6
    },
    {
      "4pm": 0.7
    }
  ];

如何将这些值放到图形X轴上，而不是仅仅基于数组编号？当我尝试上面的代码时，它破坏了图形：

Error: <path> attribute d: Expected number, "M0,NaNC17.222222222…".

这是完整的代码：

http://jsfiddle.net/spadez/e6hv9x8m/17/

Answer 1

这是您的modified fiddle。

首先，您可以在数据集对象中包含一个附加值来表示x值，我将其称为date：

var dataset = [{
    y: 0.1,
    date: new Date(2012,0,1)
  },
  {
    y: 0.6,
    date: new Date(2012,0,2)
  }
];

接下来，需要将x比例从线性更改为时间：

var minDate = new Date(2012,0,1);
var maxDate = new Date(2012,0,2);

var xScale = d3.scaleTime()
  .domain([minDate, maxDate])
  .range([0, width]);

最后，您必须在此处更新回调以从数据集对象中提取date字段，而不仅仅是它在数组中的位置：

var line = d3.line()
  .x(function(d, i) {
    return xScale(d.date);
  }) // set the x values for the line generator
  .y(function(d) {
    return yScale(d.y);
  }) // set the y values for the line generator 
  .curve(d3.curveMonotoneX) // apply smoothing to the line

D3在X轴上放置时间而不是数组值

1 个答案: