Библиотека D3.js-4-выбрать, удалить, вставить элементы

визуализация данных

Библиотека D3.js-4-выбрать, удалить, вставить элементы

В этой статье описывается, как в библиотеке D3.jsВыбор, вставка и удаление элементов

выбрать элемент

в предыдущих статьяхБиблиотека D3.js-2-выберите элементы и привяжите данныеВ , есть два метода выбора данных в D3.js, Эта часть повторяется, и вы можете узнать что-то новое после просмотра прошлого:

  • d3.select(): выбирает первый из всех указанных элементов
  • d3.selectAll(): выбирает все указанные элементы

Набор, возвращаемый обеими функциями, называется набором выбора, и обычно используется следующее:

const body = d3.select("body");  //选择文档中的body元素
const p1 = body.select("p");      //选择body中的第一个p元素
const p = body.selectAll("p");    //选择body中的所有p元素
const svg = body.select("svg");   //选择body中的svg元素
const rects = svg.selectAll("rect");  //选择svg中所有的rect元素

Теперь предположим, что некоторые<body>4 на этикетке<p>Этикетка:

<p>dog</p>
<p>cat</p>
<p>pig</p>
<p>rat</p>
  • Выберите первый элемент:
const p = d3.select("body")   // 先选择body标签
						.select("p")   // 选择第一个p标签
						.style("color","red");   // 为选定的p标签设置红色

Примечание: синтаксис цепочки, использованный выше

  • Выбрать все элементы:
const p = d3.select("body")   // 先选择body标签
						.selectAll("p")   // 选择第一个p标签
						.style("color","blue");   // 为选定的p标签设置蓝色

  • После указания атрибутов элемента выберите, указав атрибуты элемента:
    • Доступ к элементу с атрибутом класса плюсточка.
    • Доступ к элементу с атрибутом id плюс хорошоНет#

удалить элемент

Удаление элементов в D3.js достигается с помощью **remove()**:

image-20200515000953244

вставить элемент

В D3.js задействованы две функции вставки.

  • append(): вставляет элемент в конец набора выбора

  • insert(): вставляет элемент перед указанным набором выбора

Категории