Ниже мой график 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>

Я описал свою проблему на изображении ниже:

Требуется цвет фона для первой серии, добавленной на график, не могу понять, как это сделать.

-1
Nikitasha 28 Июн 2017 в 05:37
Без публикации кода это действительно сложно сказать. Как правило, если вы хотите заштриховать часть изображения, я видел, как можно было добавить еще один элемент svg в качестве контейнера (прямоугольник, круг и т. Д.) И применить цвет к его свойству заливки.
 – 
peinearydevelopment
28 Июн 2017 в 06:39
«Вопросы, требующие помощи по отладке (« почему этот код не работает? ») должны включать в себя желаемое поведение, конкретную проблему или ошибку и кратчайший код, необходимый для их воспроизведения в самом вопросе. Вопросы без четкого описания проблемы не полезны другим читателям ».
 – 
Gerardo Furtado
28 Июн 2017 в 06:44
, проверьте правки
 – 
Nikitasha
28 Июн 2017 в 09:00

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 точками данных. Вы должны выбрать все точки данных, которые вы хотите нарисовать ниже, и исключить все остальные из этой серии.

0
ccprog 29 Июн 2017 в 00:05
Кажется, что это работает, но в фоновом режиме он принимает какой-то цвет по умолчанию, кажется, как изменить этот цвет?
 – 
Nikitasha
28 Июн 2017 в 23:10
Кажется, что он покрывает только область ниже линии, но не до. длина оси y, как это сделать?
 – 
Nikitasha
28 Июн 2017 в 23:28
Проверьте изображение, которое я поставил в вопросе
 – 
Nikitasha
28 Июн 2017 в 23:33
Если я даю значение вроде 10 или 50; он покрывает область выше линии, но не ниже линии. пожалуйста предложите
 – 
Nikitasha
29 Июн 2017 в 00:06