Javascript d3面积叠加折线图

我正在修改此堆叠折线图示例：

我正在添加一个时间x轴，但我正在处理这段代码：

var areaGenerator = d3.area()
  .x(function(d, i) {
      // return i * 100;
      return i * 253.5;
  })
  .y0(function(d) {
      return y(d[0]);
  })
  .y1(function(d) {
      return y(d[1]);
  });

原始示例将

.x

访问器设置为

i*100

，这似乎是一个随机值。添加X轴时，堆叠折线图与日期刻度线不正确对齐。我可以通过返回

I*253.5

手动强制它对齐，但这并不理想。我真的不明白这个区域功能是如何工作的-任何帮助都将不胜感激

让高度=600；
宽度=800；
常数yMax=4000；
//var-hEach=40；
让边距={top:20，right:15，bottom:25，left:25}；
宽度=宽度-边距.left-边距.right；
高度=高度-margin.top-margin.bottom；
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
让formatDate=d3.timeFormat（“%b-%Y”）
让parseTime=d3.timeParse（“%Y-%m-%d”）；
让数据=[
{
“主机计数”：2553，
“集装箱数量”：875，
“小时”：“2019-01-31”，
“apm_主机计数”：0，
“代理主机计数”：2208，
“gcp_主机_计数”：0，
“aws_主机计数”：345
},
{
“主机计数”：1553，
“集装箱数量”：675，
“小时”：“2019-02-01”，
“apm_主机计数”：0，
“代理主机计数”：1208，
“gcp_主机_计数”：0，
“aws_主机_计数”：445
},
{
“主机计数”：716，
“集装箱数量”：6234，
“小时”：“2019-02-02”，
“apm_主机计数”：0，
“代理主机计数”：479，
“gcp_主机_计数”：0，
“aws_主机_计数”：237
},
{
“主机计数”：516，
“集装箱数量”：4234，
“小时”：“2019-02-03”，
“apm_主机计数”：0，
“代理主机计数”：679，
“gcp_主机_计数”：0，
“aws_主机_计数”：137
}
];
//格式化数据
data.forEach（函数（d）{
d、 小时=解析时间（d.小时）；
});
//设定范围
var x=d3.scaleTime（）.range（[0，width]）；
x、 域（d3.extent（数据，函数（d）{returnd.hour；}））；
var xAxis=d3.axisBottom（x）.ticks（11）.tickFormat（d3.timeFormat（“%y-%b-%d”））.tickValues（data.map（d=>d.hour））；
变量y=d3.scaleLinear（）
.domain（[0，yMax]）
.范围（[高度，0]）；
var areaGenerator=d3.面积（）
.x（功能（d，i）{
控制台日志（d）；
返回i*100；
})
.y0（功能（d）{
返回y（d[0]）；
})
.y1（功能（d）{
返回y（d[1]）；
});
变量颜色=['#FBB65B'、'#513551'、'#de3163']
var stack=d3.stack（）
.key（['agent\u host\u count'、'aws\u host\u count'、'container\u count']）；
var stackedSeries=堆栈（数据）；
d3.选择（'g'）
.selectAll（'路径'）
.数据（stackedSeries）
.输入（）
.append（'路径'）
.样式（“填充”，功能（d，i）{
返回颜色[i]；
})
.attr（'d'，区域生成器）
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）

用法
在d3中使用轴时，实际上需要使用轴变量来计算比例因子。执行此计算的函数由
scale*（）
方法返回。在代码中，x轴有以下内容：

  var x = d3.scaleTime().range([0, width]);

因此，变量
x
现在包含一个函数，可以为您执行插值。这就是
areaGenerator
函数的外观：

var areaGenerator = d3.area()
  .x(function(d, i) {
      return x(d.data.hour);
  })
  .y0(function(d) {
      return y(d[0]);
  })
  .y1(function(d) {
      return y(d[1]);
  });

唯一需要记住的是，在计算值时，需要使用轴所基于的相同变量。也就是说，x轴是时间轴，因此需要使用时间变量（
d.data.hour
）计算插值

至于100从何而来的例子，你基本上是正确的。在该块中，100的值或多或少是任意的。之所以选择它，可能是因为该图表在该比例下看起来相当不错。通过选择100，每个“勾号”的间隔为100px，因为没有x轴可供判断，所以实际上使用什么并不重要，只要每个数据点的勾号发生变化
 成功了！非常感谢您的解答和解释