Javascript 为svg图形提供背景色，直到特定线条覆盖的区域
下面是我的D3图形，呈现此图形的代码是：Javascript 为svg图形提供背景色，直到特定线条覆盖的区域,javascript,css,d3.js,svg,time-series,Javascript,Css,D3.js,Svg,Time Series,下面是我的D3图形，呈现此图形的代码是： <!DOCTYPE html> <svg width="960" height="200"></svg> <link rel="stylesheet" href="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.css" type="text/css"> <script src="https://d3js.org/d3.v3.min.j
<!DOCTYPE html>
<svg width="960" height="200"></svg>
<link rel="stylesheet" href="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.css" type="text/css">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://mcaule.github.io/d3-timeseries/src/d3_timeseries.js"></script>
<script>
var data = [{
"timestamp": "2017-06-23T19:03:00-07:00",
"a_1": 21.100729166695746,
"a_2": 13.862652074746523
},
{
"timestamp": "2017-06-23T19:03:10-07:00",
"a_1": 21.09999908563894,
"a_2": 13.865705100895076
},
{
"timestamp": "2017-06-23T19:03:20-07:00",
"a_1": 21.099269029842795,
"a_2": 13.965687962747438
},
{
"timestamp": "2017-06-23T19:03:30-07:00",
"a_1": 21.098538999306424,
"a_2": 14.072341340713344
},
{
"timestamp": "2017-06-23T19:03:40-07:00",
"a_1": 21.097808994028977,
"a_2": 14.105108226640267
},
{
"timestamp": "2017-06-23T19:03:50-07:00",
"a_1": 21.097079014009566,
"a_2": 14.431892151709313
},
{
"timestamp": "2017-06-23T19:04:00-07:00",
"a_1": 21.096349059247324,
"a_2": 13.827938924324112
},
{
"timestamp": "2017-06-23T19:04:10-07:00",
"a_1": 21.09561912974137,
"a_2": 13.90099860030143
}]
data.map(function(ele,index){
ele.timestamp = new Date(ele.timestamp);
});
var chart = d3.timeseries();
chart.addSerie(data.slice(0,3), {
x: 'timestamp',
y: 'a_1'
}, {
interpolate: 'linear',
color: "#505050",
label: "value_1"
});
chart.addSerie(data.slice(4), {
x: 'timestamp',
y: 'a_2'
}, {
interpolate: 'linear',
color: "#A9A9A9",
label: "value_2"
});
chart.width(900)
chart("body")
</script>
风险值数据=[{
“时间戳”：“2017-06-23T19:03:00-07:00”，
“a_1”：21.100729166695746，
“a_2”：13.862652074746523
},
{
“时间戳”：“2017-06-23T19:03:10-07:00”，
“a_1”：21.0999908563894，
“a_2”：13.865705100895076
},
{
“时间戳”：“2017-06-23T19:03:20-07:00”，
“a_1”：21.099269029842795，
“a_2”：13.965687962747438
},
{
“时间戳”：“2017-06-23T19:03:30-07:00”，
“a_1”：21.098538999306424，
“a_2”：14.072341340713344
},
{
“时间戳”：“2017-06-23T19:03:40-07:00”，
“a_1”：21.097808994028977，
“a_2”：14.105108226640267
},
{
“时间戳”：“2017-06-23T19:03:50-07:00”，
“a_1”：21.097079014009566，
“a_2”：14.431892151709313
},
{
“时间戳”：“2017-06-23T19:04:00-07:00”，
“a_1”：21.09634905959247324，
“a_2”：13.827938924324112
},
{
“时间戳”：“2017-06-23T19:04:10-07:00”，
“a_1”：21.09561912974137，
“a_2”：13.90099860030143
}]
数据映射（函数（元素、索引）{
ele.timestamp=新日期（ele.timestamp）；
});
var chart=d3.timeseries（）；
图表addSerie（数据切片（0,3）{
x:'时间戳'，
y:‘a_1’
}, {
插入：'线性'，
颜色：“505050”，
标签：“值_1”
});
图表添加系列（数据切片（4）{
x:'时间戳'，
y:‘a_2’
}, {
插入：'线性'，
颜色：“A9A9”，
标签：“值2”
});
图表宽度（900）
图表（“正文”）
使用此库，您能做的最好的事情是为始终为
0基线值。然后，您可以绘制一个diff，用颜色填充基线和值之间的区域
：
.addSerie(
data.slice(0,60),
{ x: 'date', y: 'n', diff: 'baseline' },
{ interpolate: 'linear', color: "#a6cee3", label:"value" }
)
应以data.slice（0,60）
为例，其中背景仅限于前60个数据点。您应该选择要在下面绘制背景的所有数据点，并将所有其他数据点排除在本系列之外。如果不发布任何代码，很难判断。一般来说，如果您想对图形的一部分进行着色，我看到的做法是添加另一个svg元素作为容器（rect、circle等），并对其fill属性应用颜色必须包括所需的行为、特定的问题或错误以及在问题本身中重现问题所需的最短代码。没有明确问题说明的问题对其他读者没有用处。“@peinearydevelopment，check edits这显然是可行的，但在背景中它似乎采用了一些默认颜色，如何更改此颜色？它似乎只覆盖线条下方的区域，但直到。y轴的长度，怎么做？检查我在问题中的图像，如果我给出的值是10或50；它确实覆盖线上方的区域，但不覆盖线下方的区域。请建议