[D3.js Getting Started Series 1] Нарисуйте столбчатую диаграмму с нуля

внешний интерфейс JavaScript SVG визуализация данных d3.js
[D3.js Getting Started Series 1] Нарисуйте столбчатую диаграмму с нуля

Отказ от ответственности: это руководство предназначено для версии D3.js v3.

что такое д3

Полное название D3 — (Data-Driven Documents), как следует из названия, его можно назвать документом, управляемым данными. Прослушивание названия немного абстрактно, проще говоря, на самом деле это библиотека функций JavaScript, которая в основном используется для визуализации данных.

D3 предоставляет множество простых в использовании функций, которые значительно упрощают работу с данными в JavaScript. Поскольку по своей природе это JavaScript, все функции могут быть реализованы с помощью JavaScript, но это может значительно снизить вашу рабочую нагрузку, особенно когда речь идет о визуализации данных. D3 сократил сложные этапы создания визуализаций до нескольких простых функций, вам нужно только ввести несколько простых данных, они могут быть преобразованы в различные великолепные графики. Друзьям, у которых есть основа JavaScript, должно быть легко его понять.

Зачем использовать D3.js

Мы знаем, что существует множество библиотек для построения диаграмм с открытым исходным кодом Echarts, HighCharts, G2.js и так далее. Итак, каковы преимущества и недостатки D3 по сравнению с этими библиотеками построения диаграмм?

  1. D3 основан на svg, поэтому масштабирование изображения не будет искажать. (Версия D3.js v4 уже поддерживает холст, в этой серии руководств рассказывается только о версии v3)

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

    Как видите, в D3 относительно больше шагов. Минус в том, что он неудобен и сложен для понимания новичками. Преимущество заключается в том, что он может создавать более точную графику. Таким образом, мы можем определить, когда лучше выбрать D3:

    Выберите D3: если вы хотите разработать любую диаграмму, которую можете себе представить.

    Выберите Highcharts, Echarts и т. д.: Если вы хотите разработать несколько фиксированных типов очень популярных диаграмм.

    Похоже, что D3 предназначен для художников или аудиофилов. Это так интересно, но, пожалуйста, не бросайте новичков.

что такое SVG

SVG, что означает Scalable Vector Graphics, представляет собой графический формат, используемый для описания двумерной векторной графики, и представляет собой открытый стандарт, разработанный консорциумом World Wide Web. SVG использует формат XML для определения графики.За исключением версий до IE8, большинство браузеров поддерживают SVG, который может напрямую встраивать текст SVG в HTML для отображения.

SVG имеет следующие характеристики:

  1. SVG рисует векторную графику, поэтому изображения можно масштабировать без искажений.
  2. На основе XML к каждому элементу можно добавить обработчики событий JavaScript.
  3. Каждая графика рассматривается как объект, и если вы измените свойства объекта, графика также изменится.
  4. Не подходит для игровых приложений.

Что нужно для изучения D3?

Друзья, которые хотят начать путешествие по визуализации данных через D3, какие подготовительные знания им нужны?

  1. HTML: язык гипертекстовой разметки, используемый для установки содержимого веб-страниц.
  2. CSS: каскадные таблицы стилей, используемые для оформления веб-страниц.
  3. JavaScript: буквальный язык сценариев, используемый для настройки поведения веб-страниц.
  4. DOM: объектная модель документа, используемая для изменения содержимого и структуры документа.
  5. SVG: Масштабируемая векторная графика для визуализаций рисования

Некоторые спросят: сколько времени нужно, чтобы изучить D3.js?

Я могу вам сказать: пока вы будете следовать моей вводной серии руководств по D3 и практиковаться, вы научитесь использовать D3.js для написания обычных диаграмм. Те, кто учится быстро, могут освоить его за два-три дня, а тем, кто учится медленно, может потребоваться неделя.

Давайте начнем изучать конкретные технические детали D3.js. . .

[Урок 1] Выбор элементов и привязка данных

1. Как выбирать элементы

В D3 есть две функции для выбора элементов:

  • d3.select(): первый, который выбирает все указанные элементы
  • D3.SELECTALL (): Да, вы решите указать все указанные элементы

Эта функция возвращает два результата и называетсянабор выбора.

Здесь задействована концепция:набор выбора
Объект, возвращаемый после выбора элемента с помощью d3.select() или d3.selectAll(),набор выбора.

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

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

Наборы выбора и связанные данные часто используются вместе.

2. Как связать данные

У D3 есть очень уникальная особенность: возможность привязки данных к DOM, то есть к документу. Это может быть трудно понять. Например, на веб-странице есть элемент абзаца и целое число 5, поэтому целое число 5 может быть связано с . После привязки, когда вам нужно опираться на эти данные для работы с элементом, это будет очень удобно.

В D3 данные связаны следующими двумя функциями:

  • Datum(): привязать данные к набору выбора
  • data(): привязать массив к набору выбора, а значения массива привязаны к элементам набора выбора соответственно

Условно говоря, data() используется чаще.

Предположим, что теперь есть три элемента абзаца, как показано ниже:

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

Затем используйте datum() и data() соответственно для привязки данных к трем вышеупомянутым элементам абзаца.

2.1 datum()

Допустим есть строка China, для привязки этой строки к трем элементам абзаца соответственно код такой:

var str = "China";

var body = d3.select("body");
var p = body.selectAll("p");

p.datum(str);

p.text(function(d, i){
    return "第 "+ i + " 个元素绑定的数据是 " + d;
});

После привязки данных используйте эти данные для изменения содержимого трех элементов абзаца со следующими результатами:

第 0 个元素绑定的数据是 China
 
第 1 个元素绑定的数据是 China
 
第 2 个元素绑定的数据是 China

В приведенном выше коде используется безымянная функция function(d, i). Это часто используется, когда набору выбора необходимо использовать связанные данные. Он содержит два параметра, где:

  • d обозначает данные, то есть данные, привязанные к элементу.
  • я представляет собой индекс, который представляет собой порядковый номер данных, начиная с 0.

Например, в приведенном выше примере: данные, привязанные к 0-му элементу apple, — это Китай.

2.2 data()

Имеется массив, и следующим шагом является привязка каждого элемента массива к трем элементам абзаца.

var dataset = ["I like dogs","I like cats","I like snakes"];

После связывания требования к соответствующему отношению:

  • Apple привязана мне, как собаки
  • Груша связана с Я люблю кошек
  • Банан привязан к мне, как змеи

Вызовите data() для привязки данных и замените строки трех элементов абзаца связанными строками.Код выглядит следующим образом:

var body = d3.select("body");
var p = body.selectAll("p");
 
p.data(dataset)
  .text(function(d, i){
      return d;
  });

Этот код также использует анонимную функцию function(d, i), которая соответствует следующему:

  • Когда я == 0, я люблю собак.
  • Когда i == 1, d означает, что я люблю кошек.
  • Когда я == 2, я люблю змей.

На данный момент три элемента абзаца находятся во взаимно однозначном соответствии с тремя строками в наборе данных массива, поэтому просто верните d непосредственно в функции function(d, i).

В результате, естественно, текст трех абзацев становится тремя строками массива.

I like dogs

I like cats

I like snakes
Вы обнаружите, что D3 может непрерывно вызывать такие функции:
d3.select().selectAll().text()
Это называется цепным синтаксисом, который очень похож на синтаксис JQuery, и друзья, использующие JQuery, определенно будут чувствовать себя очень дружелюбно.

【Урок 2】Выбрать, вставить, удалить элементы

1. Выберите элемент

Концепция select и selectAll, а также наборов select объяснялась ранее. В этом разделе подробно объясняется использование этих двух функций.

Предположим, что в теле есть три элемента абзаца:

<p>Apple</p>
<p>Pear</p>
<p>Banana</p>

Теперь, чтобы выполнить следующие четыре элемента выбора задачи.

1.1 Выберите первый элемент p

С помощью select параметр передается в p, поэтому возвращается первый элемент p.

var p1 = body.select("p");
p1.style("color","red");

Результат следующий, выбранный элемент отмечен красным.

1.2 Выберите три элемента p

Используйте selectAll, чтобы выбрать все элементы p в теле.

var p = body.selectAll("p");
p.style("color","red");

Результат выглядит следующим образом:

1.3 Выберите второй элемент p

Есть много способов, один из самых простых — добавить номер id ко второму элементу.

<p id="myid">Pear</p>

Затем используйте select для выбора элемента, обращая внимание на знак # перед именем идентификатора в параметре.

var p2 = body.select("#myid");
p2.style("color","red");

Результат выглядит следующим образом:

1.4 Выберите последние два элемента p

Добавьте класс к последним двум элементам,

<p class="myclass">Pear</p>
<p class="myclass">Banana</p>

Поскольку вам нужно выбрать несколько элементов, используйте selectAll. Обратите внимание на параметры, добавьте точку перед именем класса.

var p = body.selectAll(".myclass");
p.style("color","red");

Результат выглядит следующим образом:

Что касается параметров select и selectAll, то они фактически соответствуют условиям селекторов CSS, то есть используют «знак решетки (#)» для обозначения идентификатора и «точку (.)» для обозначения класса.

Кроме того, для наборов выбора, которые имеют привязку к данным, есть еще один способ выбора элементов, который заключается в гибком использовании функции (d, i). Мы уже знаем, что параметр i представляет номер индекса, поэтому мы можем использовать условный оператор, чтобы указать элемент, который должен быть выполнен.

2. Вставьте элементы

При вставке элементов задействованы две функции:

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

Предположим, что есть три элемента абзаца, как и выше.

2.1 append()

body.append("p")
    .text("append p element");

Добавьте элемент p в конец тела, результат будет таким:

Apple
Pear
Banana
append p element

2.2 insert()

Добавьте элемент абзаца перед элементом с идентификатором myid в теле.

body.insert("p","#myid")
  .text("insert p element");

Идентификатор абзаца Pear был указан как myid, поэтому результат выглядит следующим образом.

Apple
insert p element
Pear
Banana

3. Удалить элементы

При удалении элемента используйте remove для выбранного элемента, например:

var p = body.select("#myid");
p.remove();

Это удаляет элемент абзаца с указанным идентификатором.

【Урок 3】Создайте простую диаграмму

Столбчатая диаграмма — это простейшая визуальная диаграмма, в основном состоящая из прямоугольников, текстовых меток и осей координат. Для простоты в этом разделе показана только прямоугольная часть, чтобы объяснить, как использовать D3 для рисования на холсте SVG.

1. Добавьте холст

Хотя в D3 прямо не указано, что необходимо рисовать в SVG, D3 предоставляет множество генераторов графики SVG, и все они поддерживают только SVG. Поэтому рекомендуется использовать холст SVG. Код для добавления svg в элемент body с помощью D3 выглядит следующим образом:

var width = 300;  //画布的宽度
var height = 300;   //画布的高度
 
var svg = d3.select("body")     //选择文档中的body元素
    .append("svg")          //添加一个svg元素
    .attr("width", width)       //设定宽度
    .attr("height", height);    //设定高度

Теперь, когда у вас есть холст, вы можете рисовать на нем.

2. Нарисуйте прямоугольник

В этой статье рисуется горизонтальная столбчатая диаграмма. Рисуется только прямоугольник, текст и оси не рисуются.

В SVG тег элемента для прямоугольника — rect. Например:

<svg>
    <rect></rect>
    <rect></rect>
</svg>

В прямоугольнике выше нет свойства прямоугольника. Существует четыре часто используемых атрибута прямоугольников:

  • x: координата x верхнего левого угла прямоугольника
  • y: координата y верхнего левого угла прямоугольника
  • ширина: ширина прямоугольника
  • высота: высота прямоугольника

Обратите внимание, что в SVG положительная ось X направлена ​​горизонтально вправо, а положительная ось Y — вертикально вниз.

Теперь, имея набор данных, мы хотим визуализировать это. Данные следующие:

var dataset = [ 250 , 210 , 170 , 130 , 90 ];  //数据（表示矩形的宽度）

Для простоты мы напрямую используем размер значения для представления ширины прямоугольника в пикселях (это не лучший способ сказать позже). Затем добавьте следующий код.

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return d;
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

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

svg.selectAll("rect")   //选择svg内所有的矩形
    .data(dataset)  //绑定数组
    .enter()        //指定选择集的enter部分
    .append("rect") //添加足够数量的矩形元素

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

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

После добавления элементов нужно присвоить значения атрибутам каждого элемента. Здесь используется функция (d, i) Как упоминалось ранее, d представляет данные, привязанные к текущему элементу, а i представляет номер индекса. При присвоении значения свойству необходимо использовать связанные данные и номер индекса.

Последняя строка:

.attr("fill","steelblue");

Установить цвет прямоугольного элемента. Вообще говоря, лучше всего писать его в виде внешнего CSS, удобного для классификации и модификации. Здесь, чтобы облегчить понимание новичкам, стиль прописан прямо в элементе.

Получившийся график показан на изображении в начале этой статьи.

Адрес примера кода:GitHub.com/legend-Ли/Д…

【Урок 4】Использование масштаба и оси координат

шкала

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

1. Зачем вам масштабная линейка?

В предыдущей главе была сделана столбчатая диаграмма с массивом:

var dataset = [ 250 , 210 , 170 , 130 , 90 ];

При рисовании напрямую используйте 250 для задания ширины прямоугольника, то есть ширина прямоугольника составляет 250 пикселей.

Этот метод очень ограничен, если значение слишком велико или слишком мало, например:

var dataset_1 = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
var dataset_2 = [ 2500, 2100, 1700, 1300, 900 ];

For the above two arrays, it is absolutely impossible to use 2.5 pixels to represent the width of the rectangle, which is not visible at all; it is also impossible to use 2500 pixels to represent the width of the rectangle, because the canvas is not Так долго.

Итак, нам нужна вычисляемая связь, уметь:Сопоставляет значение одной области с другой областью с тем же соотношением размеров.

Это шкала (Scale).

2. Какие весы бывают?

Масштабные линейки, очень похожие на функции в математике. Например, для квадратичной функции с одной переменной имеется два неизвестных x и y, при определении значения x определяется и значение y.

В математике диапазон x называетсяДомен, диапазон y называетсяспектр.

Шкала в D3 также имеет домен и диапазон, которые называются доменом и диапазоном соответственно. Разработчикам необходимо указать диапазон домена и диапазона, чтобы можно было получить взаимосвязь расчета.

D3 предоставляет множество шкал, две из которых наиболее часто используются, описаны ниже.

2.1 Линейная шкала

Линейная шкала, отображающая один непрерывный интервал на другой. Для решения проблемы ширины гистограммы требуется линейная шкала.

Предположим, у вас есть следующий массив:

var dataset = [1.2, 2.3, 0.9, 1.5, 3.3];

Существующие требования следующие:

Сопоставьте наименьшее значение в наборе данных с 0, сопоставьте наибольшее значение с 300.

код показывает, как показано ниже:

var min = d3.min(dataset);
var max = d3.max(dataset);
 
var linear = d3.scale.linear()
        .domain([min, max])
        .range([0, 300]);
 
linear(0.9);    //返回 0
linear(2.3);    //返回 175
linear(3.3);    //返回 300

где d3.scale.linear() возвращает линейную шкалу. domain() и range() устанавливают домен и диапазон шкалы соответственно. Здесь также используются две функции, которые часто появляются с масштабом:

  • d3.max()
  • d3.min()

Эти две функции могут найти максимальное и минимальное значение массива, предоставляемого D3. Согласно приведенному выше коду,

Область шкалы: [0,9, 3,3]

Диапазон шкалы: [0, 300]

Таким образом, при вводе 0,9 возвращается 0, при вводе 3,3 возвращается 300. А при входе в 2.3? Возвращает 175, которое рассчитывается по правилам для линейных функций.

Пожалуйста, помните одну вещь:

Возвращаемое значение d3.scale.linear() можно использовать как функцию. Поэтому есть такое использование: linear(0.9).

2.2 Порядковая шкала

Иногда домен и диапазон не обязательно являются смежными. Например, с двумя массивами:

var index = [0, 1, 2, 3, 4];
var color = ["red", "blue", "green", "yellow", "black"];

Мы хотим, чтобы 0 соответствовал красному цвету, 1 — синему и так далее.

Однако эти значения дискретны и линейные шкалы не подходят, и требуется порядковая шкала.

var ordinal = d3.scale.ordinal()
        .domain(index)
        .range(color);
 
ordinal(0); //返回 red
ordinal(2); //返回 green
ordinal(4); //返回 black

Использование аналогично линейной шкале.

3. Добавьте масштабную линейку на столбчатую диаграмму.

На основе предыдущего раздела измените массив и определите линейную шкалу.

var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
 
var linear = d3.scale.linear()
        .domain([0, d3.max(dataset)])
        .range([0, 250]);

После этого добавьте прямоугольник, как в предыдущей главе, и примените масштаб при задании ширины прямоугольника.

var rectHeight = 25;   //每个矩形所占的像素高度(包括空白)
 
svg.selectAll("rect")
    .data(dataset)
    .enter()
    .append("rect")
    .attr("x",20)
    .attr("y",function(d,i){
         return i * rectHeight;
    })
    .attr("width",function(d){
         return linear(d);   //在这里用比例尺
    })
    .attr("height",rectHeight-2)
    .attr("fill","steelblue");

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

Ось

Координатная ось — это график, который часто появляется на визуальных диаграммах и состоит из серии отрезков и делений. Ось координат не имеет готовых графических элементов в SVG и должна состоять из других элементов. D3 предоставляет компонент оси, поэтому рисовать оси на холсте SVG так же просто, как добавлять обычный элемент.

1. Что представляет собой ось координат

Среди предопределенных элементов холста SVG есть шесть основных фигур:

  • прямоугольник
  • круглый
  • овал
  • отрезок

<axis x1="" x2="" ...></axis>


<g>
<!-- 第一个刻度 -->
<g>
<line></line>   <!-- 第一个刻度的直线 -->
<text></text>   <!-- 第一个刻度的文字 -->
</g>
<!-- 第二个刻度 -->
<g>
<line></line>   <!-- 第二个刻度的直线 -->
<text></text>   <!-- 第二个刻度的文字 -->
</g> 
...
<!-- 坐标轴的轴线 -->
<path></path>
</g>

Элемент группировки — это элемент на холсте SVG, то есть группа. Этот элемент является контейнером для объединения других элементов, здесь он используется для группировки других элементов оси координат.

Было бы обременительно добавлять эти элементы вручную, и для этого в D3 предусмотрен компонент: d3.svg.axis(). Это работает для нас.

2. Определите оси

Понятие масштаба упоминалось выше.Чтобы создать ось координат, необходимо использовать масштаб, и они часто используются вместе. Затем добавьте компонент оси на основе данных и масштаба из предыдущей главы.

//数据
var dataset = [ 2.5 , 2.1 , 1.7 , 1.3 , 0.9 ];
//定义比例尺
var linear = d3.scale.linear()
      .domain([0, d3.max(dataset)])
      .range([0, 250]);
 
var axis = d3.svg.axis()
     .scale(linear)      //指定比例尺
     .orient("bottom")   //指定刻度的方向
     .ticks(7);          //指定刻度的数量

Строки 1–2: определение массива.

Строки 4–7: Определите масштаб, в котором используется набор данных массива.

Строки 9 – 12: Определите оси, где используется линейная линейная шкала. в:

  • d3.svg.axis(): компонент оси в D3, который может генерировать элементы, составляющие ось в SVG.
  • scale(): задает масштаб.
  • orient(): определяет ориентацию шкалы, нижняя означает, что она отображается ниже оси координат.
  • ticks(): указывает количество тиков.

3. Добавьте оси в SVG

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

svg.append("g")
   .call(axis);

Выше есть функция call(), параметром которой является ось оси, определенная ранее.

В D3 аргументом call() является функция. После вызова передайте текущий набор выбора в качестве параметра этой функции. То есть следующие две части кода эквивалентны.

function foo(selection) {
  selection
      .attr("name1", "value1")
      .attr("name2", "value2");
}
foo(d3.selectAll("div"))

а также

d3.selectAll("div").call(foo);

следовательно,

svg.append("g").call(axis);

а также

axis(svg.append(g));

равны.

4. Установите стиль и положение осей

Стиль оси по умолчанию не очень красивый, вот общий стиль:

	
<style>
.axis path,
.axis line{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}
 
.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style>

Стили контура, линии и текстовых элементов под осью класса определяются соответственно. Затем просто установите класс оси на axis .

Положение оси координат может быть установлено свойством преобразования.

Обычно он задается вместе при добавлении элементов и записывается в следующем виде:

svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(20,130)")
  .call(axis);

Адрес примера кода:GitHub.com/legend-Ли/Д…

【Урок 5】Полная столбчатая диаграмма

Полная столбчатая диаграмма состоит из трех частей: прямоугольника, текста и осей. В этой главе будет всесторонне использовано содержимое предыдущих глав для создания практичной столбчатой ​​диаграммы, включая: набор выбора, привязку данных, масштабную линейку, ось координат и т. д.

1. Добавьте холст SVG

//画布大小
var width = 400;
var height = 400;
 
//在 body 里添加一个 SVG 画布   
var svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);
 
//画布周边的空白
 var padding = {left:30, right:30, top:20, bottom:20};

Отступ определен выше, чтобы оставить пустое пространство вокруг SVG.Лучше не рисовать графику на границе.

2. Определите данные и масштаб

//定义一个数组
var dataset = [10, 20, 30, 40, 33, 24, 12, 5];
        
//x轴的比例尺
var xScale = d3.scale.ordinal()
    .domain(d3.range(dataset.length))
    .rangeRoundBands([0, width - padding.left - padding.right]);
 
//y轴的比例尺
var yScale = d3.scale.linear()
    .domain([0,d3.max(dataset)])
    .range([height - padding.top - padding.bottom, 0]);

Используйте порядковую шкалу для оси x и линейную шкалу для оси y. Обратите внимание на диапазоны двух диапазонов шкалы.

Объяснение использования d3.range():

 d3.range([start,]stop[,step]); //返回等差数列
 var a = d3.range( 10);
 console.log(a)  //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
 var b = d3.range( 2,10 );
 console.log(b);//[2, 3, 4, 5, 6, 7, 8, 9]
 var c = d3.range( 2,10 ,2);
 console.log(c);//[2, 4, 6, 8]

Объяснение использования Ordinal.rangeRoundBands(): Github.com/ 3 / из 3 / вики / ...

3. Определите оси

//定义x轴
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");
        
//定义y轴
var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

Направление деления оси x вниз, а оси y влево.

4. Добавьте прямоугольник и текстовые элементы

//矩形之间的空白
var rectPadding = 4;
 
//添加矩形元素
var rects = svg.selectAll(".MyRect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("class","MyRect")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("width", xScale.rangeBand() - rectPadding )
        .attr("height", function(d){
            return height - padding.top - padding.bottom - yScale(d);
        });
 
//添加文字元素
var texts = svg.selectAll(".MyText")
        .data(dataset)
        .enter()
        .append("text")
        .attr("class","MyText")
        .attr("transform","translate(" + padding.left + "," + padding.top + ")")
        .attr("x", function(d,i){
            return xScale(i) + rectPadding/2;
        } )
        .attr("y",function(d){
            return yScale(d);
        })
        .attr("dx",function(){
            return (xScale.rangeBand() - rectPadding)/2;
        })
        .attr("dy",function(d){
            return 20;
        })
        .text(function(d){
            return d;
        });

Особое внимание следует уделить координатам x и y элементов прямоугольника и текстовых элементов, а соответствующие значения следует указать в сочетании с масштабом.

5. Добавляем элементы оси

//添加x轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
  .call(xAxis); 
        
//添加y轴
svg.append("g")
  .attr("class","axis")
  .attr("transform","translate(" + padding.left + "," + padding.top + ")")
  .call(yAxis);

Положение оси координат должно быть установлено в сочетании со значением пробела.

Адрес примера кода:GitHub.com/legend-Ли/Д…

Следующая глава: «[D3.js Introduction Series II] Общие сведения об обновлении && Enter && Exit, создание интерактивных динамических диаграмм》

Использованная литература:www.ourd3js.com/
D3.js (v3) китайский API:GitHub.com/3/3/wiki/…

Категории