D3.js Добавление заштрихованной области таймфрейма за линией на линейном графике

Я использую D3.js (v4) для создания простого линейного графика, который выглядит так:

Простой линейный график

Вот скрипта

Я хотел бы добавить второй набор данных, который показывает заштрихованную область таймфрейма за линией.

Данные будут выглядеть примерно так:

RangeStart: 31-Mar-18
RangeEnd: 16-Apr-18
Label: "Golden Period"
Color: "#3cfb34"
  • RangeStart представляет собой начало заштрихованной области на графике.
  • RangeEnd представляет собой конец заштрихованной области на графике.
  • Метка — это текст, который появляется поверх заштрихованной области.
  • Цвет - это цвет заштрихованной области

И диаграмма выведет заштрихованную область (с меткой) следующим образом:

Простой линейный график с заштрихованной областью таймфрейма

Как я могу выполнить что-то подобное?

Огромное спасибо за помощь!


javascript charts d3.js linegraph
person ShittyDeveloper    schedule 12.05.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете добавить прямоугольник и текст перед добавлением строки:

// ADD TIMEFRAME
var timeframe = {
    RangeStart: parseDate('31-Mar-18'),
    RangeEnd: parseDate('16-Apr-18'),
    Label: "Golden Period",
    Color: "#3cfb34"
};

var gTimeframe = svg.append("g").attr("class", "timeframe");

gTimeframe.append("rect")
    .attr("x", x(timeframe.RangeStart))
    .attr("y", 0)
    .attr("width", x(timeframe.RangeEnd) - x(timeframe.RangeStart))
    .attr("height", height)
    .style("fill", timeframe.Color);

gTimeframe.append("text")
    .attr("x", x(timeframe.RangeStart) + 5)
    .attr("y", 15)
    .text(timeframe.Label);
// END TIMEFRAME

Обновлен скрипт.

Если вам нужно добавить несколько таймфреймов, сохраните их в массиве и используйте привязку данных D3 следующим образом:

// ADD TIMEFRAME
var timeframes = [
  {
    RangeStart: parseDate('31-Mar-18'),
    RangeEnd: parseDate('16-Apr-18'),
    Label: "Golden Period",
    Color: "#3cfb34"
  },
  {
    RangeStart: parseDate('20-Apr-18'),
    RangeEnd: parseDate('3-May-18'),
    Label: "Other Period",
    Color: "steelblue"
  },
];

var gTimeframes = svg
    .selectAll("g.timeframe")
  .data(timeframes).enter()
    .append("g").attr("class", "timeframe");

gTimeframes.append("rect")
    .attr("x", function(d) { return x(d.RangeStart); })
    .attr("y", 0)
    .attr("width", function(d) { return x(d.RangeEnd) - x(d.RangeStart); })
    .attr("height", height)
    .style("fill", function(d) { return d.Color; });

gTimeframes.append("text")
    .attr("x", function(d) { return x(d.RangeStart) + 5; })
    .attr("y", 15)
    .text(function(d) { return d.Label; });

JSFiddle

person thibautg    schedule 12.05.2018
comment
Это прекрасно работает. Благодарю вас! Знаете ли вы, как я могу добавить несколько таймфреймов на график? - person ShittyDeveloper; 12.05.2018
comment
Я обновил ответ, добавив возможность добавить несколько таймфреймов с помощью массива и привязки данных. - person thibautg; 12.05.2018