Диаграмма Horizon. Часть 4-я.Выводим график с разными высотами "слоев".

1.5. Выводим график с разными высотами “слоев”

И наконец (как обещано в начале статьи) выведем график, с зеркальным наложением отрицательных значений, изменяя высоту с одного “слоя” до четырех.

Основной фрагмент кода будет выглядеть следующим образом:

d3.select("#demo1").call(function(div) {
 
 div.datum(data);     // это источник данных

  div.append("div")
      .attr("class", "horizon")
      .call(context.horizon()
        .height(120)
        .colors(["#bdd7e7","#bae4b3"])
        .title("Horizon, 1-band (120px)") // самая большая высота “слоя”
        .extent([-10, 10]));

… 

  div.append("div")
      .attr("class", "horizon")
      .call(context.horizon()
        .height(30)      // и самая маленькая высота “слоя”
        .colors(["#bdd7e7","#bae4b3"])
        .title("Horizon, 1-band (120px)") // самая большая высота “слоя”
        .extent([-10, 10]));
});

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