Javascript 如何在组合图（条形图和线条图）中将x轴分别与条形图对齐？

我有一个基于D3.js的组合/条形图和折线图。x轴域包含最小和最大日期，条形图基于值。但最后一条（rect）在图表之外。我可以通过强制（手动）将其引入，但它不会反映数据

var数据=[
{
fcst本地有效：“2018-11-13T14:00:00-0600”，
流行音乐：20，
rh:67，
温度：38，
wspd:7
},
{
fcst本地有效：“2018-11-14T15:00:00-0600”，
流行音乐：15，
相对湿度：50，
温度：39，
wspd:8
},
{
fcst本地有效：“2018-11-15T16:00:00-0600”，
流行音乐：10，
相对湿度：90，
温度：40，
wspd:9
}
];
//边距、宽度和高度。
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=500-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
//日期解析。
const parseDate=d3.timeParse（“%Y-%m-%dT%H:%m:%S%Z”）；
data.forEach（函数（d）{
d、 日期=解析日期（d.fcst\u有效\u本地）；
});
//设置缩放域。
var x=d3.scaleTime（）.range（[0，宽度]）
.域（d3.范围（数据、函数（d））{
返回日期；
}));
var y0=d3.scaleLinear（）.range（[height，0]）.domain（[01100]）；
常数y1=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，（d）=>d.pop）]）；
//构建我们的SVG对象。
const svg=d3.select（'svg'）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.append（'g'）.attr（'class'，'container'））
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//设置x轴、y轴左侧和y轴右侧。
var xAxis=d3.axisBottom（x）
.滴答声（d3.时间日。每（1）次）
//.tickFormat（d3.timeFormat（“%b%d，%H:%M”））
.tickSize（0）。tickPadding（10）；
变量y0Axis=d3.轴左（y0）
.滴答声（5）.滴答声大小（0）；
变量y1Axis=d3.axisRight（y1.ticks（5.tickSize）（0）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+0+），0）”
.呼叫（y0Axis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.呼叫（Y1轴）；
//拉杆。
var bar=svg.selectAll（“.precips”）
.数据（数据）；
bar.exit（）.remove（）；
bar.enter（）.append（“rect”）
.attr（“类”、“precip”）
.attr（“宽度”，宽度/数据长度-50）
.attr（“x”，函数（d）{
返回x（d.日期）；
})
.attr（“y”，高度）
.transition（）.持续时间（1000）
.attr（“y”，函数（d）{
返回y0（d.pop）；
})
.attr（“高度”，功能（d）{
返回高度-y0（d.pop）；
});
常量lineRH=d3.line（）
.x（（d）=>x（d['date']））
.y（d=>y0（d['rh']）；
append（'path'）
.基准（数据）
.attr（'类'，'行'）
.attr（'填充'，'无'）
.attr（'笔划'，'红色'）
.attr（'stroke-linejoin'，'round'）
.attr（'stroke-linecap'，'round'）
.attr（'stroke-width'，1.5）
.attr（'d'，lineRH）
添加比最后一项晚一点的虚拟数据项

在这里，它是硬编码的，但您可以根据最后一项的日期动态添加它


var数据=[
{
fcst本地有效：“2018-11-13T14:00:00-0600”，
流行音乐：20，
rh:67，
温度：38，
wspd:7
},
{
fcst本地有效：“2018-11-14T15:00:00-0600”，
流行音乐：15，
相对湿度：50，
温度：39，
wspd:8
},
{
fcst本地有效：“2018-11-15T16:00:00-0600”，
流行音乐：10，
相对湿度：90，
温度：40，
wspd:9
},
{
fcst本地有效：“2018-11-16T01:00:00-0600”
}
];
//边距、宽度和高度。
var margin={顶部：20，右侧：20，底部：30，左侧：50}，
宽度=500-边距。左侧-边距。右侧，
高度=200-margin.top-margin.bottom；
//日期解析。
const parseDate=d3.timeParse（“%Y-%m-%dT%H:%m:%S%Z”）；
data.forEach（函数（d）{
d、 日期=解析日期（d.fcst\u有效\u本地）；
});
//设置缩放域。
var x=d3.scaleTime（）.range（[0，宽度]）
.域（d3.范围（数据、函数（d））{
返回日期；
}));
var y0=d3.scaleLinear（）.range（[height，0]）.domain（[01100]）；
常数y1=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0，d3.max（数据，（d）=>d.pop）]）；
//构建我们的SVG对象。
const svg=d3.select（'svg'）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.append（'g'）.attr（'class'，'container'））
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//设置x轴、y轴左侧和y轴右侧。
var xAxis=d3.axisBottom（x）
.滴答声（d3.时间日。每（1）次）
//.tickFormat（d3.timeFormat（“%b%d，%H:%M”））
.tickSize（0）。tickPadding（10）；
变量y0Axis=d3.轴左（y0）
.滴答声（5）.滴答声大小（0）；
变量y1Axis=d3.axisRight（y1.ticks（5.tickSize）（0）；
svg.append（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+0+），0）”
.呼叫（y0Axis）；
svg.append（“g”）
.attr（“类”、“y轴”）
.attr（“变换”、“平移”（+width+），0）
.呼叫（Y1轴）；
//拉杆。
var bar=svg.selectAll（“.precips”）
.数据（数据）；
bar.exit（）.remove（）；
bar.enter（）.append（“rect”）
.attr（“类”、“precip”）
.attr（“宽度”，宽度/数据长度-50）
.attr（“x”，函数（d）{
返回x（d.日期）；
})
.attr（“y”，高度）
.transition（）.持续时间（1000）
.attr（“y”，函数（d）{
返回y0（d.pop）；
})
.attr（“高度”，功能（d）{
返回高度-y0（d.pop）；
});
常量lineRH=d3.line（）
.x（（d）=>x（d['date']））
.y（d=>y0（d['rh']）；
append（'path'）
.基准（数据）
.attr（'类'，'行'）
.attr（'fill'，'no
var x = d3.scaleTime().range([0, width])
.domain([d3.min(data, function (d) {
    return d.date;
}), d3.timeDay.offset(d3.max(data, function (d) { return d.date; }), 1)]);

(2) [Tue Nov 13 2018 15:00:00 GMT-0500 (Eastern Standard Time), Fri Nov 16 2018 17:00:00 GMT-0500 (Eastern Standard Time)]