Диаграмма Horizon. Часть 2-я. Добавляем элементы.

1.3. Добавляем элементы

Первое что мы сделаем - это изменим вид графика, сделав его более наглядным и приятным для глаза. Не буду оригинальничать и для моделирования потока данных использую функцию, приведенную в документации к пакету cubism.js.

function stock(name) {
 
  var value = 0,
      values = [],
      i = 0,
      last;
  return context.metric(function(start, stop, step, callback) {
    start = +start, stop = +stop;
    if (isNaN(last)) last = start;
    while (last < stop) {
      last += step;
      value = Math.max(-10, Math.min(10, value + .8 * Math.random() - .4 + .2 * Math.cos(i += .2)));
      values.push(value);
    }
    callback(null, values = values.slice((start - stop) / step));
  }, name);
}

Теперь поиграемся с настройками графика horizon.

d3.select("#demo").call(function (div) {
   
    div.selectAll(".horizon")
        .data([horizon_data])
        .enter()
        .append("div")
        .attr("class", "horizon")
        .call(context.horizon()
        //.mode("offset") 
        .mode("mirror")      
        .height(120)
        .colors(["#bdd7e7","#bae4b3"])
        .title("Horizon, 1-band (120px)")
        //.extent([-20, 20])     
        .extent([-10, 10])
             );
});

Первое, что мы можем изменить - это способ вывода отрицательных значений на график horizon. Напомню, что отрицательные значения отображаются другим цветом и могут выводится (см. Рисунок 3, "Диаграмма Horizon.Основы") зеркально отраженными от верхней границы полосы отображения графика, либо как и положительные значения графика. Способ вывода выбирается с помощью свойства .mode(“mirror/offset”). Высота блока, выделяемая для вывода графика определяется параметром .height(n), где n - высота в пикселях. Обратите внимание, что при уменьшении параметра .height(n) пропорционально уменьшается (масштабируется) высота графика и возникает законный вопрос: а где же знаменитая “многослойность” графика horizon? Ответ дает параметр horizon.extent([extent]) который определяет максимальное и минимальное значение, которое может быть выведено в одной “полосе” и отвечает за степень “сжатия” обычного графика в “многослойный” график типа horizon.

Следующий параметр доступный для изменения - выбор цветовой палитры для визуализации различных диапазонов положительных и отрицательных значений с помощью horizon.colors([colors]). Если цвета не определены, то они выбираются из стандартной палитры: #08519c #3182bd #6baed6 #08519c #bdd7e7 #bae4b3 #74c476 #31a354 #006d2c. При выборе своего цветового набора необходимо учитывать, что количество цветов должно быть четным, число color.length / 2 - определяет количество цветовых слоев графика horizon. Первая половина цветового массива будет определять раскраску негативных значений, а вторая - положительных значений графика.

При выборе своего цветового набора необходимо учитывать, что количество цветов должно быть четным, число color.length / 2 - определяет количество цветовых слоев графика horizon. Первая половина цветового массива будет определять раскраску негативных значений, а вторая - положительных значений графика.

Размеры области вывода графика horizon можно изменять используя опции: parcoords.width(), parcoords.height(), parcoords.margin() - но мы их не используем, сознательно форматируя область вывода canvas средствами html + css.

И наконец выведем на график легенду, т.е. его описание. Это можно сделать двумя способами. Первый - использовать параметр .horizon.title([title]), например .horizon(“Граф horizon”). Второй - использовать подпись при получении данных - в нашем случае var horizon_data = srock(“Граф horizon”);

Добавим оси. Надо сказать что значения отображаемые вдоль оси зависят от контекста. Так как при создании контекста мы указали шаг по времени равный 1 секунде .step(1e3) то эти временные метки и будут выводится на ось, динамически обновляясь по мере обновления данных графика (контекста)

 div.append("div")
      .attr("class", "axis")
      .call(context.axis());

Пакет предоставляет достаточно широкие возможности по отображению осей графика и эти возможности базируются в т.ч. и на возможности пакета D3.js.

Добавим тонкую вертикальную черту (т.н. rule), возле которой выводится текущее значение графика. Значения обновляются при перемещении мыши.

 div.append("div")
      .attr("class", "axis")
      .call(context.axis());

Выведем значения

context.on("focus", function(i) {
  d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px");
});

Посмотреть и попробовать код примера можно ниже.