为 svg 图提供背景颜色，直到特定线覆盖的区域答案

【问题标题】：Giving background color to a svg graph till the region covered by specific line为 svg 图提供背景颜色，直到特定线覆盖的区域
【发布时间】：2017-12-01 05:51:03
【问题描述】：

下面是我的 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.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>

我在下图中描述了我的问题：

Need to have some background color the first series added in graph, couldn't figure out how to do that.Please suggest

【问题讨论】：

不发布任何代码真的很难说。通常，如果您想对图形的一部分进行着色，我所看到的是将另一个 svg 元素添加为容器（矩形、圆形等）并将颜色应用于其填充属性。
“寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及在问题中重现它所需的最短代码本身。没有明确问题陈述的问题对其他读者没有用”.
@peinearydevelopment，检查编辑

标签： javascript css d3.js svg time-series

【解决方案1】：

您可以使用此库做的最好的事情是为您的数据添加一个额外的baseline 值，每个点始终为0。然后，您可以绘制一个差异，用color 填充基线和您的值之间的区域：

.addSerie(
    data.slice(0,60),
    { x: 'date', y: 'n', diff: 'baseline' },
    { interpolate: 'linear', color: "#a6cee3", label:"value" }
)

应以data.slice(0,60) 为例，其中背景将限制为前60 个数据点。您应该选择所有要在下面绘制背景的数据点，并将所有其他数据点排除在此系列之外。

【讨论】：

这显然可以正常工作，但在背景中它似乎需要一些默认颜色，如何更改这种颜色？
它似乎只覆盖了线以下的区域，但没有覆盖到 . y轴的长度，怎么弄？
检查我在问题中输入的图片
如果我给出像 10 或 50 这样的值；它确实覆盖了线以上但不包括线以下的区域。请建议