Некоторое уточнение по диаграммам многократного использования

В На пути к многоразовым диаграммам Майк излагает пример диаграммы временных рядов в конце, В этом он имеет следующую строку:

// Select the svg element, if it exists.
var svg = d3.select(this).selectAll("svg").data([data]);

Это происходит в определении объекта многократного использования. Я с трудом понимаю это утверждение.

  • Во-первых, зачем использовать select(this)? Является ли контекст this текущим экземпляром объекта диаграммы? Если да, зачем беспокоиться, почему бы не просто пойти и выбрать элементы svg на странице?

  • Почему selectAll? Не соответствует ли каждому объекту диаграммы одному графику?

  • Почему [data], а не просто data, как в большинстве других примеров, которые я видел? Кроме того, почему мы привязываем данные к элементу svg, а не (скажем) к элементам пути?

Буду благодарен за любую помощь.

ОТВЕТЫ

Ответ 1

Многократная диаграмма, как определено в статье, может быть использована для вставки диаграммы в любой элемент DOM, возможно, несколько раз на одной странице, хотя и с разными data. Более того, благодаря вышесказанному утверждению он может быть использован для обновления графика, который уже существует в элементе DOM. Способ, которым он будет использоваться (из статьи):

var formatDate = d3.time.format("%b %Y");

var chart = timeSeriesChart()
             .x(function(d) { return formatDate.parse(d.date); })
             .y(function(d) { return +d.price; });

// Put the chart _inside_ #example1
d3.select("#example1")
  .datum(data1)
  .call(chart);

// Put the same chart _inside_ #example2
d3.select("#example2")
  .datum(data1)
  .call(chart);

// Update the data for #example1, without appending another <svg> element
setInterval(function () {
    d3.select("#example1")
      .datum(data2)
      .call(chart);
}, 5000);

Теперь, чтобы решить ваши проблемы, как это происходит:

  • Сначала обратите внимание, что этот код запускается внутри selection.each(...). Согласно ссылке API, this контекст внутри .each является элементом DOM. Ссылка API также гласит:

    Каждый оператор может быть использован для обработки рекурсивных выборок, используя d3.select(this) в функции обратного вызова.

    Итак, d3.select(this) возвращает a d3.selection, содержащий только текущий элемент DOM, который может содержать или не содержать элемент <svg> внутри него. Выбор элемента /<svg> на странице не приведет к очень многоразовой диаграмме, так как это будет бесполезно с полной страницей, а не только с элементом DOM, в который вы хотите увидеть диаграмму.

  • Использование selectAll создает новую группу элементов для D3 для работы, противоположную select, которая сохраняет исходную группировку. См. Статью для получения более подробной информации о том, как работают вложенные выборы. И да, вы правы, что здесь группа selectAll будет использоваться для создания или обновления только одного элемента <svg>, который приведет нас к следующей точке.

  • Одна из основных концепций, лежащих в основе D3, - это data-join, где массив данных присоединяется к группе элементов DOM в одностороннем единственная мода. В этом случае нас интересует добавление/обновление некоторого data до одного элемента <svg>. Использование [data] предоставляет нам одноэлементный массив, который может быть привязан к одному элементу <svg>. В качестве альтернативы это могло бы быть написано как:

  var svg = d3.select(this).selectAll("svg").data([1]); // No `data`

   // Update the area path.
   g.select(".area")
      .data(data)    // Specifying data explicitly
      .attr("d", area.y0(yScale.range()[0]));

   // Update the line path.
   g.select(".line")
      .data(data)   // Specifying data explicitly
      .attr("d", line);

Тем не менее, более приятно иметь уже имеющиеся данные для подсегментов, привязывая его к элементу <svg>.

Ответ 2

Многоразовая диаграмма - это не что иное, как диаграммы, которые уже были созданы, мы можем просто получить выгоду от диаграмм. Нам не нужно тратить время на создание диаграмм с нуля.

Кредиты: Диаграммы Reusabe для d3