代码之家 › 专栏 › 技术社区 › Jimmy

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

d3.js javascript

Jimmy · 技术社区 · 6 年前

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

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

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

但是我真的很想得到数据

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/

1 回复 | 直到 6 年前

Danny Buonocore DTM 6 年前

这是你的 modified fiddle .

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]);

最后,您必须更新这里的回调以拉取字段,而不仅仅是它在数组中的位置:

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

推荐文章

Eddie Worthington · D3.js指针相对于轴域的坐标

2 年前

b404 · 如何在d3 react typescript应用程序中正确设置“path”元素中属性“d”的类型

2 年前

user6456564 · 双条形图创建

6 年前

MetalCat · 在d3中,如何在地图上的鼠标上方显示多个值?

6 年前

atdyer · 使用svg变换更新位置时,力模拟会出现抖动

6 年前

MTT · 最适合散点图的回归

6 年前

Cyley Simon · 以chile/name格式将Csv转换为json

6 年前

Himani · 线图和面积图之间的颜色不同

6 年前

Francis Katalinic · d3。使用d3通过ajax响应实现JSJSON。json()

6 年前

user9646441 · 为什么这个svg和数组会在angular中多次启动?

6 年前