javascript - 使用 d3.js 创建一条穿过某些点的线

Question

我的情况与此JSFiddle中的情况非常相似一些分数代表一支球队(特别是其在足球赛季中的最终排名)。

我想用一条恰好穿过这些点的线来代替这些点，以便最终结果显示每个团队在最终排名位置方面的时间演变。

我知道如何通过设置 X1,X2,Y1,Y2 坐标来创建一条线，但我不明白如何将此坐标设置为精确值(例如，如果该线位于2006-2007 赛季和 2007-2008 赛季我必须将第一季的值设置为 X1 和 Y1 为 d[0] 和d[1] 但对于 X2 和 Y2 我需要数组中下一个元素的值。

我对 D3.js 非常陌生，因此非常欢迎任何建议和解决方案。谢谢

Answer 1

假设您已经为线条声明了一些数据，根据该数据绘制实际线条就像这样简单:

1. 创建 X 和 Y 比例:

   var xScale = d3.scale.linear().domain([dataRange.x1, dataRange.x2]).range([plotRange.x1, plotRange.x2]);
   var yScale = d3.scale.linear().domain([dataRange.y1, dataRange.y2]).range([plotRange.y1, plotRange.y2]);
   

2. 声明线路函数:

   var valueLine = d3.svg.line()
   .x(function (dataItem, arrayIndex) {
       return xScale(dataItem);
   })
   .y(function (dataItem, arrayIndex) {
       return yScale(dataItem)
   });
   

3. 最后创建路径:

   g.append("path")
       .style("stroke", someColour)
       .attr("d", valueLine(myData))
       .attr("class", "someClass");
   

请参阅此处的更多文档:https://www.dashingd3js.com/