Автор оригинала: Bryony Miles.
По словам Википедии A Маленький несколько является:
серия подобных графов или диаграмм, использующих одинаковые масштабы и оси, позволяющие их легко сравнить
Они могут быть действительно мощными, и там есть несколько замечательных примеров наилучшей практики, в том числе:
- Бар Джим Вальяндингам Кратко
- Радиальные радиалы Nadieh Bremer
- Мужчина Натана Яу сдвигается к женским линиям
Я думал, что было бы полезно следить за моим центром D3.js () для маленьких кратных.
Вот тот же самый важный код с одним дополнением – можете ли вы обнаружить это?
//step 1 - JOIN (with or without a key)
var my_group = svg.selectAll('.**chart_group**')
.data(data, d => d.id);
//step 2 - EXIT and REMOVE
my_group.exit().remove();
//step 3 - ENTER
var enter = my_group.enter().append("g").attr("class","**chart_group**");
//step 4 - APPEND
enter.append("rect").attr("class","group_rect");
enter.append("text").attr("class","group_text");
enter.append("image").attr("class","group_image");
enter.append("g").attr("class","sub_chart_group");
//step 5 - MERGE
my_group = my_group.merge(enter);
Таким образом, каждая «группа» имеет ограниченный прямоугольник, название и изображение Но У него также есть данные, поэтому требуется 4-й элемент, добавленный – sub_chart_group Отказ
Поэтому после того, как вы добавили свойства к элементам в my_group – Как видно в Position_Group_Elements Функция в моем Простая демоверсия Отказ
Вам также нужно подумать о позиции. В зависимости от ваших потребностей UI вам нужно будет расположить каждую группу в нужном месте на SVG.
В моем Простая демоверсия Я выбрал простой подход с panels_per_row constance Отказ
Я использую это, чтобы установить X_POS и Y_POS в Position_Group_Elements Функция, а затем добавляю атрибут Translate для размещения каждой панели в правильном положении.
my_group.select(".sub_chart_group")
.attr("transform",d => "translate(" + d.x_pos + "," + d.y_pos + ")");
Теперь для захватывающего бита – создавая подгруппу и добавление данных.
//step 1 - JOIN (with or without a key)
var sub_group = my_group.select(".sub_chart_group")
.selectAll('.sub_chart_elements_group')
.data(d => [d.chart_data]);
//step 2 - EXIT and REMOVE
sub_group.exit().remove();
//step 3 - ENTER
var sub_enter = sub_group.enter().append("g")
.attr("class","sub_chart_elements_group");
//step 4 - APPEND
sub_enter.append("path").attr("class","chart_line");
sub_enter.append("path").attr("class","chart_area");
//step 5 - MERGE
sub_group = sub_group.merge(sub_enter);
Код очень похоже, верно?
Но Есть две ключевые различия:
- Вместо SVG я использовал ** my_group.select (“. svg_chart_group”) ** Как селектор
- Я использовал новое имя для группы Sub_enter ” sub_chart_element_group “
Последний шаг, состоит в том, чтобы выбрать элементы в Sub_Group и добавить свойства. Например:
sub_group.select(".chart_area")
.attr("d", area)
.attr("stroke","none")
.attr("fill",d => d.color)
.attr("fill-opacity",0.2)
.attr("transform","translate(" + start_x + "," + start_y + ")");
Вот и все.
Посмотрите на мой Простая демоверсия чтобы увидеть все это в одном месте.
После того, как вы освоили данные, добавленные, вы можете продолжать, чтобы создать свои собственные красивые маленькие несколько графиков.
Если вы хотите увидеть тот же процесс, используя .join () вместо .merge () взглянуть на это Простая демоверсия Отказ