Рубрики
Без рубрики

D3.js – три основных диаграмма

Короткое введение до D3.js, глядя на три самых основных диаграмма – бар, разброс и линия

Автор оригинала: Bryony Miles.

Получение к захвату с d3.js может быть крутой кривой обучения. Я уже написал две статьи на самую важную функцию – добавление данных.

Вот новый, чтобы заставить вас начать на трех самых основных диаграммах:

  • вертикальная бара
  • рассеиваться
  • линия и площадь

Это поставляется с Простая демоверсия Отказ Все три типа диаграмм имеют одинаковые элементы основных элементов:

  • SVG
  • x_scale и y_scale
  • X и Y оси
  • данные

После нанесения вашего SVG вам нужно установить весы:

  const years = d3.set(my_data, d => d.year).values();
  const y_max = d3.max(my_data, d => d.value);
  
  const x_scale = d3.scaleBand().domain(years).range([0,width]);
  const y_scale = d3.scaleLinear().domain([0,y_max]).range([height,0]);

В этом случае:

  • X_SCALE, основанная на значении переменной года
  • y_scale, начиная с 0 и запущена до максимума переменной значения

Отдельная статья о шкале D3 будет следовать!

Теперь оси:

 svg.append("g")
    .call(d3.axisBottom(x_scale))
    .attr("transform","translate(" + margin + "," + (height-margin) + ")");
  
  svg.append("g")
    .call(d3.axisLeft(y_scale))
    .attr("transform","translate(" + margin + "," + margin + ")");
  

Я не применил CSS или не использовал любые дополнительные функции здесь для простоты. Я также планирую другую статью на оси D3.

Опять же для ясности, я использовал один и тот же набор набора данных для каждого графика.

my_data = [{"year":1999,"value":55}, ... {"year":2008,"value":180}]

Таким образом, следующий шаг – добавить данные – увидеть мой предыдущий пост для получения более подробной информации об этом.

Вы заметите в моем Простая демоверсия Что существуют два разных блока добавления данных. Это разница в типе диаграммы:

  • Бар и разброс – D3 добавляет новый элемент SVG (прямоугольник или круг) для каждой строки в DataSest
  • линия и область – D3 добавляет новый элемент для каждого набора данных (путь, созданный D3.AREA и D3.LINE). Вот почему my_data Прилагается в [], в противном случае он попытается (и потерпит), чтобы нарисовать путь для каждой строки в наборе данных.

И, наконец, прогулка по графикам, один за другим:

Гистограмма

    my_group.select(".chart_rect")
      .attr("x",d => x_scale(d.year))
      .attr("y", d => y_scale(d.value))
      .attr("width",x_scale.bandwidth())
      .attr("height",d => y_scale(0) - y_scale(d.value))
      .attr("fill","lightblue")
      .attr("transform","translate(" + margin + "," + margin + ")");
  • х и y Позиции основаны на x_scale и y_scale
  • ширина это пропускная способность X_scale.
  • Высота менее интуитивно понятен. Вы заметите, что диапазон Y_SCALE находится в обратном направлении [Высота, 0] Почему? Положение Y на SVG проходит сверху вниз, и мы хотим масштаб в обратном порядке. Поэтому, когда мы рассчитываем высоту, нам нужно объяснить это, так что это y_scale (0) - y_scale (d.value)
  • заполнить – Цвет заполнения
  • трансформировать Переводится прямоугольники для верхней и левой маржи.

Разброса

    my_group.select(".chart_dot")
      .attr("cx",d => x_scale(d.year) + (x_scale.bandwidth()/2))
      .attr("cy", d => y_scale(d.value))
      .attr("r", 10)
      .attr("fill","red")
      .attr("transform","translate(" + margin + "," + margin + ")");

Это очень похоже, но с разными атрибутами для элемента круга SVG:

  • CX и CY вместо х и у
  • CX также необходимо перевести половину пропускной способности X_SCALE, чтобы точка была центральной
  • R – который является радиусом в пикселях

Диаграмма линии и площади

     line_group.select(".chart_line")
       .attr("d", line)
       .attr("fill","none")
       .attr("stroke","green")
       .attr("stroke-width",1)
       .attr("transform","translate(" + (margin + (x_scale.bandwidth()/2)) + "," + margin + ")");
  
     line_group.select(".chart_area")
       .attr("d", area)
       .attr("stroke","none")
       .attr("fill","green")
       .attr("fill-opacity",0.2)
       .attr("transform","translate(" + (margin + (x_scale.bandwidth()/2)) + "," + margin + ")");

D Атрибуты относятся к линии D3 и генераторам области, определенные ранее

   const line = d3.line()
            .x(d => x_scale(d.year))
            .y(d => y_scale(d.value));
  
   const area = d3.area()
            .x(d => x_scale(d.year))
            .y0(d => y_scale(0))
            .y1(d => y_scale(d.value));

Они оба рисуют путь, управляемый данными, используя X_SCALE и Y_SCALE. Для области есть дополнительная координата Y для нижней части области – в этом случае y_scale (0).

Остальное похоже на другие диаграммы:

  • заполнить и инсульт – Цвет с непрозрачностью наполнения 0,2 для площади для контраста и заполнения ни одного для линий – мы заинтересованы в инсульте.
  • трансформировать Включает в себя половину пропускной способности X_SCALE. Вы не можете добавить атрибут X на путь SVG, чтобы любой перевод должен быть выполнен в атрибуте преобразования.

Помните, вы можете увидеть, что он работает на моем Простая демо.