Инструмент визуализации данных d3_front-end 3d визуализация
Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
ВизуализацияинструментD3Учебное пособие- Глава 1. Введение в D3
- Глава 2 Первая программа Hello World
- Глава 3 Официальный вход в мир D3
- Глава 4. Выбор, вставка и удаление элементов
- Глава 5. Создание простой диаграммы
- Глава 6. Использование масштаба
- Глава 7. Ось координат.
- Глава 8. Полная гистограмма
- Глава 9. Пусть график движется
- Глава 10. Понимание update(), enter(), exit()
- Глава 11 Интерактивное управление
- Глава 12 Макет
- Глава 13 Круговая диаграмма
- Глава 14. Схема направленной силы
- Глава 15. Древовидная диаграмма
- Глава 16. Визуализация карты
- Сайт для изучения D3
- предположение
Глава 1. Введение в D3
В последние годы визуализация становится все более популярной. Многие газеты, журналы, порталы и средства массовой информации широко используют технологии визуализации, что делает текст сложных данных очень простым для понимания. Существует пословица: «Картинка стоит денег». тысячи отдельных слов». Д3 Это лучший среди инструментов визуализации данных, основанный на JavaScript Разработан, проект размещен на Гитхаб. от С момента рождения D3 его постоянно хвалили. GitHub Рейтинг складов проекта на сайте также постоянно растет. Визуализация становится все более популярной. Многие газеты, журналы, порталы, новостные издания и средства массовой информации используют большое количество технологий визуализации, благодаря которым сложные данные и тексты становятся очень простыми для понимания. Существует пословица: «Картинка стоит тысячи долларов». слова", действительнода Верный своему названию. Различные инструменты визуализации данных, а также нравиться разработка Blowout, D3 Это лучшее среди них. Д3 Полное имя: (Data-Driven Документы), как следует из названия, представляют собой документ, управляемый данными. Название звучит немного абстрактно, но, если говорить проще, на самом деле это JavaScript Библиотека функций в основном используется для визуализации данных.
Подготовительные знания перед изучением D3
- HTML: язык гипертекстовой разметки, используемый для настройки содержимого веб-страниц.
- CSS: таблица каскадных стилей, используемая для установки стиля веб-страницы.
- JavaScript: буквальный язык сценариев, используемый для настройки поведения веб-страниц.
- DOM: объектная модель документа, используемая для изменения содержимого и структуры документа.
- SVG: масштабируемая векторная графика,Графика для визуализации рисунков
D3 «Установить»
D3 — это библиотека функций JavaScript, которая не требует того, что обычно называют «установкой». Он имеет только один файл, и на него можно ссылаться в HTML. В настоящее время D3 обновлен до версии V5. Поскольку принципы схожи, версия V3 по-прежнему используется в качестве примера для объяснения.
- Загрузите файл D3.js D3.zip
- Загрузить файл D3.js
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>//прямой Содержит ссылки на Интернет
<script src="xxxx/d3.v3.min.js" charset="utf-8"></script>//Загрузить локальный файлГлава 2 Первая программа Hello World
1.существоватьHTML средний выход HelloWorld
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World</p>
</body>
</html>Вывод результатов
Hello World2.Измените Hello World с помощью JS
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<p>Hello World</p>
<script>
var paragraphs = document.getElementsByTagName("p");
paragraphs[0].innerHTML = "SWUSTVIS";
</script>
</body>
</html>Вывод результатов
SWUSTVIS3.Измените Hello World с помощью D3
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<p>Hello World</p>
<script>
d3.select("body").select("p").text("SWUSTVIS");
</script>
</body>
</html>Вывод результатов
SWUSTVISГлава 3 Официальный вход в мир D3
Выбор элементов и привязка данных — это самое основное содержимое D3, и в этой главе будет дано краткое представление о них.
- набор выбора
существовать D3 , существует две функции для выбора элементов, и результаты, возвращаемые этими двумя функциями, называются наборами выбора. d3.select()：Выбирает все указанные элементы Нет.одининдивидуальный d3.selectAll()：Выбрать все элементы
Например, обычное использование наборов выбора следующее.
var body = d3.select("body"); //Выбираем элемент тела документа середина
var p1 = body.select("p"); //Выбираем первый индивидуальный элемент bodyсередина
var p = body.selectAll("p"); //Выбираем все p элементов bodyсередина
var svg = body.select("svg"); //Выбираем svg-элемент bodyсередина
var rects = svg.selectAll("rect"); //Выбираем все прямоугольные элементы svgсередина
var id = body.select("#id"); //Выбираем элемент bodyсерединаid
var class = body.select(".class");//Выбираем элемент bodyсерединаклассаПосле выбора функции элемента часто используются цепные выражения, за которыми следуют другие операции, такие как:
d3.select("#id").text("SWUSTVIS").attr("font-size","12px");- обязательностьданные
Наборы выборки и связанные данные обычно используются вместе, D3 Данные связываются с помощью следующих двух функций: datum()：обязательностьодининдивидуальныйданныеприезжатьнабор выбораначальство data()：обязательностьодининдивидуальныймножествоприезжатьнабор При выборе каждое значение массива связано с набором Привязка различных элементов выбора
Предположим сейчассуществовать Есть трииндивидуальныйэлемент абзацанравиться Вниз：
<p></p>
<p></p>
<p></p>для датума(): Предположим, есть строка SWUSTVIS, чтобы связать эту строку с тремя элементами абзаца соответственно, код выглядит следующим образом:
var str = "SWUSTVIS";
var body = d3.select("body");
var p = body.selectAll("p");
p.datum(str);
p.text(function(d, i){
return "Нет. "+ i + " индивидуальныйэлементобязательностьизданныеда " + d;
});После привязки данных используйте эти данные для изменения содержимого трех элементов абзаца. Результаты следующие:
Нет. 0 индивидуальныйэлементобязательностьизданныеда SWUSTVIS
Нет. 1 индивидуальныйэлементобязательностьизданныеда SWUSTVIS
Нет. 2 индивидуальныйэлементобязательностьизданныеда SWUSTVISдля данных():
Есть массив. Далее нужно привязать каждый элемент массива к трем элементам абзаца.
I love three things in this world.Sun, moon and you. Sun for morning, moon for night, and you forever.
var dataset = ["sun","moon","you"];Вызовите data(), чтобы связать данные и заменить строки трех элементов абзаца связанными строками. Код выглядит следующим образом:
var body = d3.select("body");
var p = body.selectAll("p");
p.data(dataset)
.text(function(d, i){
return "I love " + d;
});В результате, естественно, текст трех абзацев становится тремя строками массива.
I love sun
I love moon
I love youВ предыдущем коде также используется безымянная функция function(d, i), и соответствующая ситуация выглядит следующим образом:
d ------- data данные
i ------- index индексКогда я == 0, d — солнце. Когда я == 1, d — луна. Когда я == 2, d — это ты.
На данный момент три элемента абзаца и массив dataset цель трииндивидуальныйнитьдаодинодинпереписыватьсяиз,существоватьфункция function(d, i) прямой return d Вот и все.
Глава 4. Выбор, вставка и удаление элементов
1.Выберите элемент гипотезасуществовать body В нем есть три элемента абзаца:
<p>Sun</p>
<p>Moon</p>
<p>You</p>Теперь существуют, вам необходимо выполнить следующие четыре задачи «Выберите элемент».
Выберите первый элемент
d3.select("body").select("p").style("color","red");
Выбрать все элементы
d3.select("body").selectAll("p").style("color","red");
Выберите второй элемент
Существует множество методов, один из самых простых — добавить ко второму элементу идентификационный номер.
<p id="moon">Moon</p>
-------------------------------------
d3.select("#moon").style("color","red");
Выберите последние два элемента
Добавьте класс к последним двум элементам,
<p class="myclass">Moon</p>
<p class="myclass">You</p>Поскольку вам нужно выбрать несколько элементов, используйте selectAll.
d3.selectAll(".myclass").style("color","red");
2.вставить элемент
При вставке элементов участвуют две функции:
- append()：существоватьнабор выбораконецвставить элемент
- insert()：существоватьнабор выбора Переднийвставить элемент
Допустим, есть три элемента абзаца, такие же, как указано выше.
append()
d3.select("body").append("p").text("Star");
insert()
d3.select("body").insert("p","#moon").text("Star");
3.Удалить элемент
При удалении элемента для выбранного элемента используйте remove Вот и все.
- remove()
d3.select("#moon").remove();
Глава 5. Создание простой диаграммы
Гистограмма — это простейший визуальный значок, который в основном состоит из прямоугольника, текстовых меток и осей координат. Для простоты нарисована только прямоугольная часть, чтобы объяснить, как использовать D3 существовать SVG Рисование на холсте.
что такое холст
Ранее обрабатываемые объекты были HTML Текст не предполагает изготовления графики. Чтобы рисовать, первое, что вам понадобится – это «холст» для рисования. HTML 5 Предлагаю два мощныхиз“холст”：SVG и Canvas。
SVG Рисунок представляет собой векторное изображение, поэтому увеличение изображения не исказит его, и вы можете добавить JavaScript обработчик событий. Каждое отдельное изображение рассматривается как объект. Если вы измените свойства объекта, изображение также изменится. Будьте осторожны, существуют SVG средний, х Положительное направление оси горизонтально вправо, y Положительное направление оси — вертикально вниз.
существовать canvas , как только изображение будет нарисовано, оно больше не будет привлекать внимание браузера. Если его положение изменится, необходимо перерисовать всю сцену, включая любые объекты, которые могли быть покрыты графикой.
Добавить холст
D3 Хотя нет явного требования существования SVG в рисовании, но D3 Предоставляет многочисленные SVG Генераторы графов, все они поддерживают только SVG из。поэтому,предположениеиспользовать SVG холст.
использовать D3 существовать body Добавить в элемент svg Код следующий.
var width = 300; //Ширина холста
var height = 300; //Высота холста
var svg = d3.select("body") //Выбираем элемент тела документа середина
.append("svg") //добавить водининдивидуальныйsvgэлемент .attr("width", width) //Установить ширину
.attr("height", height); //Устанавливаем высотуС помощью холста вы сможете рисовать на существующем холсте.
Нарисуйте прямоугольник
рисоватьодининдивидуальный Горизонтальныйиз Столбчатая диаграмма。Только Нарисуйте прямоугольник,Нетрисоватьхарактериось。существовать SVG , метка элемента прямоугольника равна rect。 Например:
<svg>
<rect></rect>
<rect></rect>
</svg>Существует четыре часто используемых свойства прямоугольников:
x: верхний левый угол прямоугольника x координировать
y: верхний левый угол прямоугольника y координировать
ширина: ширина прямоугольника
height: высота прямоугольникаТеперь существует набор данных, которые мы хотим визуализировать.
var dataset = [ 250 , 210 , 170 , 130 , 90 ]; //данные (указывает ширину прямоугольника)
var width = 300; //Ширина холста
var height = 300; //Высота холста
var svg = d3.select("body") //Выбираем элемент тела документа середина
.append("svg") //добавить водининдивидуальныйsvgэлемент .attr("width", width) //Установить ширину
.attr("height", height); //Устанавливаем высоту
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");
PS: Перейти с горизонтального на вертикальное?
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("y",function(d,i){
return height - d;
})
.attr("x",function(d,i){
return i * rectHeight;
})
.attr("height",function(d){
return d;
})
.attr("width",rectHeight-2)
.attr("fill","steelblue");
PS: В приведенном выше примере, если значение да и размер пикселя совпадают, то возникнет проблема (введение масштаба).
Глава 6. Использование масштаба
Масштаб D3 середина — очень важная концепция. В предыдущей главе упоминалось, что использование числовых значений для представления пикселей — не лучший способ решить эту проблему.
Зачем нам нужны весы?
В предыдущей главе я создал гистограмму с массивом:
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 ];Для двух вышеуказанных массивов невозможно использовать 2,5 пикселя для представления ширины прямоугольника, который вообще не виден. Также невозможно использовать 2500 пикселей для представления ширины прямоугольника, потому что холст не такой; длинный. Следовательно, нам нужна взаимосвязь расчета, которая может сопоставить значение определенной области с другой областью без изменения соотношения размеров. Это масштаб.
Какие весы существуют?
Масштаб во многом похож на функцию в математике. Например, для квадратичной функции одной переменной имеем x и y Два неизвестных, когда x Когда значение y определено, y Стоимость определяется. существование МАТЕМАТИКАсредний, х Диапазон называется доменом, y Диапазон называется диапазоном. Д3 Шкала середина также имеет область определения и диапазон значений, которые называются соответственно. domain и диапазон. Разработчикам необходимо указать domain и range диапазон, так что можно получить расчетное соотношение.
D3 предоставляет множество шкал, две наиболее часто используемые представлены ниже.
- линейный масштаб линейный масштаб, может быть индивидуальным непрерывным интервалом, сопоставленным с другим интервалом. Чтобы решить проблему ширины гистограммы, нужен линейный масштаб. Предположим, у вас есть следующий массив:
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() Возвращает линейный масштаб. домен() и range() Задать отдельно регион масштабный диапазон значений. Здесь также используются две индивидуальные функции, которые часто появляются вместе со шкалой:
d3.max()
d3.min()Эти две функции могут найти максимальное и минимальное значения массива, согласно приведенному выше коду.
Область масштаба: [0,9, 3,3]
Диапазон значений шкалы: [0, 300]
Поэтому при входе 0.9 когда, вернуться 0; при вводе 3.3 когда, вернуться 300. При входе 2.3 Когда? возвращаться 175, который рассчитывается по правилам линейных функций. Пожалуйста, помните одну вещь: d3.scale.linear(). да Можеткогда Делатьфункция Приходитьиспользоватьиз,иметь толькоэтот Образецизиспользование：linear(0.9)。
- порядковая шкала иногда,Область определения и диапазон значений не обязательно являются непрерывными. Примернравиться,Есть два отдельных массива:
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Использование аналогично линейному Масштаб.
Добавить масштабную линейку в гистограмму
существования На основе предыдущей главы,Изменить массив,Сноваопределениеодининдивидуальныйлинейный масштаб。
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");Таким образом, все значения рассчитываются в соответствии с одним и тем же соотношением линейного масштаба, поэтому соотношение размеров между значениями остается неизменным.
Глава 7. Ось координат.
ось,да Визуальная диаграмма середина Разновидность графики, которая часто появляется,Зависит отодинсерия отрезков линиии Состав шкалы。осьсуществовать SVG В нем нет готовых графических элементов,и его нужно составлять из других элементов. Д3 предоставилосьизкомпоненты,нравитьсяэтотсуществовать SVG Рисование осей на холсте становится таким же простым, как добавление обычного элемента.
Определить оси координат
В предыдущей главе упоминалось понятие масштаба.,Чтобы сгенерировать ось,Нужно использовать масштаб,Они часто ходят вместе. под,существуют На основе шкалы данных предыдущей главы,добавить водининдивидуальныйосьизкомпоненты。
//данные
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); //Указываем количество тиковсуществовать SVG Добавить ось в
После определения ось просто существовать SVG Добавьте элемент группировки ви другие элементы Воляосьдобавить в Перейти в группу Вот и все.Код выглядит следующим образом:
svg.append("g").call(axis);
настраиватьосьизстильи Расположение
Стиль оси по умолчанию не очень красив. Вот распространенный стиль:
<style>
.axis path,
.axis line{
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>Классы определяются отдельно axis вниз path、line、text Стиль элемента. Далее вам нужно только установить класс оси координат на axis Вот и все.
Положение оси координат можно установить с помощью атрибута преобразования.
Обычно элемент существованиядобавить в складывается и записывается в следующем виде: нравиться:
svg.append("g")
.attr("class","axis")
.attr("transform","translate(20,130)")
.call(axis);
Глава 8. Полная гистограмма
Полная гистограмма состоит из трех частей: прямоугольника, текста и оси координат. В этой главе будет всесторонне применено содержание предыдущих глав для создания практической гистограммы, включая: набор выборки, привязку данных, масштаб, ось координат и т. д.
добавить в 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};Определение масштаба данных
//Определяем индивидуальный массив
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
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom");
//Определяем ось Y
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left");добавить впрямоугольникихарактерэлемент
//пространство между прямоугольниками
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);
})
.attr("fill","steelblue");
//добавить в буквенном элементе
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;
})
.style({
"fill":"#FFF",
"text-anchor":"middle"
});добавить восьизэлемент
//добавить ось вx
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")
.call(xAxis);
//добавить по оси
svg.append("g")
.attr("class","axis")
.attr("transform","translate(" + padding.left + "," + padding.top + ")")
.call(yAxis);
Глава 9. Пусть график движется
D3 поддерживает создание динамических диаграмм. Иногда изменения в диаграммах должны происходить медленно, чтобы пользователи могли четко видеть процесс изменений.
Что такое динамические эффекты
Диаграммы, созданные в предыдущих главах, появились мгновенно.,Тогда рисунок больше не будет меняться после завершения.,Это статическая диаграмма. динамические диаграммы,да означает, что карта существования претерпит какие-то изменения в определенный период времени,Возможна форма, цвет, расположение и т.д.,И пользователи могут видеть процесс изменений.
Например, есть круг с центром (100, 100)。сейчассуществоватьмы надеемсякруглыйиз x координаты из 100 переехать в 300, и процесс перемещения существует 2 Происходит в течение нескольких секунд. В это время вам необходимо использовать динамические эффекты, существующие D3 Здесь мы называем это переходом.
Динамический подход
D3 предоставляет 4 метода реализации перехода графа: из состояния A в состояние B.
- transition() запускает эффект перехода
Состояние (форма) до и после графических изменений、Расположение、цвети т. д.）,Например:
.attr("fill","red") //Начальный цвет для красного
.transition() //Начать переход
.attr("fill","steelblue") //прекращениецветдля Железный синийD3 Он автоматически интерполирует значения цвета (значения RGB) между двумя цветами (красным и железно-синим), чтобы получить значение цвета для перехода. Нам не нужно знать, как вычислять да между середина, нам просто нужно наслаждаться результатом Вот и все.
- Длительность() определяет продолжительность перехода в миллисекундах.
Например, длительность(2000) означает, что она длится 2000 миллисекунд, то есть 2 секунды.
- Easy() определяет метод перехода. Обычно используются:
линейный: обычные линейные изменения круг: Медленно достигните конечного состояния трансформации. упругий: достижение конечного состояния с отскоком отскок: существование подпрыгивает несколько раз в конечном состоянии При вызове формат следующий: ease(“bounce”)。
- Delay() указывает время задержки,Указывает, что преобразование начнется через определенный период времени. Эта функция может указать задержку для всего процесса.,Задержки также могут быть указаны индивидуально для каждого человека.
Например, при указании целого:
.transition()
.duration(1000)
.delay(500)нравитьсяэтот,Графика в целом существует с отставанием 500 Изменение происходит через миллисекунды, а продолжительность изменения составляет 1000 миллисекунда. Следовательно, общая продолжительность перехода составляет 1500 миллисекунд.
Другой пример, при указании графики по одному (данные привязаны к графике):
.transition()
.duration(1000)
.delay(funtion(d,i){
return 200*i;
})Итак, предположим, что элементов 10, тогда первый элемент задерживается на 0 миллисекунд (поскольку i = 0), второй элемент задерживается на 200 миллисекунд, третий элемент задерживается на 400 миллисекунд и так далее.... длина всего перехода 200*9+1000=2800 миллисекунд.
Реализуйте простые динамические эффекты
Ниже Волясуществовать SVG холствнутридобавить виндивидуальный круг, сразу после появления круга Активировать эффекты перехода。
Первый круг требует перемещения координаты x.
var circle1 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
//существовать1Второй（1000миллиметр Второй）Внутри Воляцентр кругакоординировать Зависит от100Изменятьдля300
circle1.transition()
.duration(1000)
.attr("cx", 300);Второй круг требует как перемещения координаты x, так и изменения цвета.
var circle2 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");//и Нет.одининдивидуальныйкруглыйодин Образец,Опустить часть кода
//существовать1.5Второй（1500миллиметр Второй）Внутри Воляцентр кругакоординировать Зависит от100Изменятьдля300,
//Цвет Воли меняется с зеленого на красный
circle2.transition()
.duration(1500)
.attr("cx", 300)
.style("fill","red");Третий круг требует перемещения координаты x, изменения цвета и изменения радиуса.
var circle3 = svg.append("circle")
.attr("cx", 100)
.attr("cy", 100)
.attr("r", 45)
.style("fill","green");
//существовать2Второй（2000миллиметр Второй）Внутри Воляцентр кругакоординировать Зависит от100Изменятьдля300
//Цвет Воли меняется с зеленого на красный
//Радиус Воли изменен с 45 на 25
//Метод перехода использует отскок (существовать отскоки несколько раз в конечной точке)
circle3.transition()
.duration(2000)
.ease("bounce")
.attr("cx", 300)
.style("fill","red")
.attr("r", 25);Добавляйте динамические эффекты к столбчатым диаграммам
На основе полной гистограммы из предыдущей главы с небольшими изменениями можно сделать интересную гистограмму с динамическими эффектами. существоватьдобавить в буквенном элементеипрямоугольникэлементизкогда,Активировать эффекты перехода,Пусть каждый столбец и текст медленно поднимутся до целевой высоты.,И существуют, несколько раз прыгает в цель.
Для текстовых элементов код выглядит следующим образом:
.attr("y",function(d){
var min = yScale.domain()[0];
return yScale(min);
})
.transition()
.delay(function(d,i){
return i * 200;
})
.duration(2000)
.ease("bounce")
.attr("y",function(d){
return yScale(d);
});Что меняется до и после перехода текстовых элементов y координировать.его исходное состояниедасуществовать y ось равна 0 местоположение (но учтите, что вы не сможете вернуться в исходное состояние прямо 0,Применение масштабных расчетовхолстсерединаиз Расположение）。прекращениесостояниедацелевое значение。
Глава 10. Понимание update(), enter(), exit()
Update、Enter、Exit да D3 серединатрииндивидуальный очень важная концепция, касающаяся данабора. выбранные ситуации, когда количественная связь неопределенна.
В предыдущих главах коды нравиться и вниз появлялись неоднократно.
svg.selectAll("rect") //Выбираем все прямоугольники в SVG
.data(dataset) //связываем массив
.enter() //обозначениенабор Вводная часть выбора
.append("rect") //добавить в Достаточное количество прямоугольных элементов- update() Когда соответствующий элемент точно удовлетворяет （ Привязка количества данных = Соответствующий элемент ), на самом деле такой функции как существование не существует, только дадля связана со следующей enter и exit Давайте вместе объясним, как представить себе такую функцию. Но Соответствующий элемент просто удовлетворяет операции час, прямой, за которым следует прямая text ,style Ожидание операции Вот и все.
- enter() Когда соответствующего элемента недостаточно （ Привязка количества данных > Соответствующий элемент ）,Когда соответствующего элемента недостаточно,Обычнодобавить в элементе, что делает его равным количеству связанных данных. обычно следует первым append действовать.
- exit() Когда соответствующих элементов слишком много （ Привязка количества данных < Соответствующий элемент ）,Когда соответствующих элементов слишком много,Обычно Удалить элемент, сделав его равным количеству связанных данных. Обычно за этим следует remove действовать.
Глава 11 Интерактивное управление
Взаимодействие с графиками,Относится к настройке одного или нескольких индивидуальных прослушивателей на существующем графическом элементе.,когдапроисходит событиечас,Реагируйте соответственно.
Какое взаимодействие
взаимодействие,Относится к да Пользователь ввел определенную команду,Программа должна каким-то образом отреагировать после получения инструкции. Для диаграмм визуализации,Взаимодействие может сделать диаграммы более яркими,Может выразить больше контента. Примернравиться,Перетащите диаграммусерединаопределенная графика、При наведении курсора мыши на график появляется окно подсказки.、Используйте сенсорный экран для увеличения или уменьшения изображения и т. д. Обычно пользователи используют три типа инструментов для взаимодействия: мышь、клавиатура、Сенсорный экран.
нравитьсячтодобавить взаимодействие Для определенного элемента добавить взаимодействие Операция очень проста,Код выглядит следующим образом:
var circle = svg.append("circle");
circle.on("click", function(){
//существоватьэтотвнутридобавить взаимодействие Внутри Позволять
});Этот кодекс существует SVG серединадобавить в Понятноодининдивидуальныйкруглый,Затемдобавить вашиндивидуальный слушатель,дапрошел on() добавить виз。существовать D3 , каждый набор выборок имеет on() Функция для добавления Прослушиватель событий.
on() из Нет.одининдивидуальныйпараметрдамониторизсобытие,Нет.дваиндивидуальныйпараметрдамониторприезжатьсобытиеназадответиз Внутри Позволять,Нет.дваиндивидуальныйпараметрдаодининдивидуальныйфункция。
События мыши:
- щелчок: Когда мышь щелкает по элементу, это эквивалентно mousedown и mouseup комбинациясуществоватьодинрост。
- наведение курсора мыши: курсор помещается на элемент.
- mouseout: Когда курсор выходит за пределы элемента.
- mousemove: Когда мышь перемещается.
- mousedown: кнопка мыши нажата. **
- mouseup: кнопка мыши отпущена. **
- dblclick: Двойной щелчок мыши. **
События клавиатуры:
- keydown: срабатывает, когда пользователь нажимает любую клавишу.,Удерживание будет вызывать это событие повторно. Это событие не различает прописные и строчные буквы.,примернравиться“A”и“a”считаетсядляодин К。
- нажатие клавиши: вызывается, когда пользователь нажимает символьную клавишу (прописные и строчные буквы, цифры, знак плюса, знак равенства, возврат каретки и т. д.). Это событие будет срабатывать несколько раз, если пользователь нажимает и удерживает клавишу. Это событие чувствительно к регистру.
- keyup: срабатывает, когда пользователь отпускает клавишу, без учета регистра. На сенсорных экранах есть три часто используемых события:
Когда событие отслеживается, D3 сохранит текущее событие в d3.event Объект, в котором хранятся различные параметры события до того, как оно произойдет. Если вам необходимо отслеживать событие и немедленно выводить его, вы можете добавить. Одна строка кода: circle.on(“click”, function(){ console.log(d3.event); });
Столбчатая диаграмма с взаимодействием
Измените предыдущую часть кода гистограммы на следующий код.
var rects = svg.selectAll(".MyRect")
.data(dataset)
.enter()
.append("rect")
.attr("class","MyRect") //Помещаем в класс fill Очистить свойства
.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);
})
.attr("fill","steelblue") //Не прописывайте цвет заливки в CSS
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.transition()
.duration(500)
.attr("fill","steelblue");
});Этот код добавить в Добавлены слушатели двух индивидуальных событий. Изменена функция слушателя середина. d3.select(this) означает выбор текущего элемента, это Для элемента перед «дакогда» просто напишите это, если хотите изменить элемент, реагирующий на событие.
Содержимое функции прослушивания при наведении курсора мыши: превратить текущий элемент в желтый цвет.
Содержимое функции прослушивателя mouseout: медленно измените элемент на его исходный цвет (синий).
Глава 12 Макет
макет,Можетпониматьстановиться «Функция построения общих графиков», с помощью которой гораздо удобнее составлять различные относительно сложные графики.
макет Что?
макет, английский да Макет. Буквально это можно рассматривать как «определение того, какой элемент где рисоватьсуществовать». макет D3 очень важное понятие. Д3 В отличие от многих других визуализаций, она относительно низкоуровневая и неудобна для новичков, но после освоения она более удобна, чем другие визуализации. На рисунке ниже показано D3 Отличия от других инструментов визуализации:
нравитьсячтопониматьмакет
Как видно из картинки выше,Роль макета да: Воля данных, которые не подходят для рисования, преобразуются в данные, пригодные для рисования. поэтому,для легко понять новичкам,Функция Волямакета объясняется как: преобразование данных.
Какие планировки?
D3 предоставляет в общей сложности 12 макетов: круговая диаграмма, сила, аккорд, дерево, кластер, связка и пакет (Pack), гистограмма (Histogram), карта разделов (Partition), карта стека (Stack), карта матричного дерева (Treemap). карта иерархии (Hierarchy).
12 индивидуальныймакетсередина,диаграмма иерархии（Hierarchy）Нетспособныйпрямойиспользовать。кластерная диаграмма、Схема упаковки、Карта зонирования、Дендрограмма、древовидная диаграмма матрицыда расширяется из диаграммы иерархии. нравиться Таким образом, вы можете использовать макет 11 один (есть 5 индивидуальнода раскрывается из диаграммы иерархии). Функция этих макетов заключается в преобразовании одного типа данных в другой тип данных, а преобразованные данные способствуют визуализации.
- Пакет — изображение пакета.
- Аккорд — Диаграмма аккордов
- Кластер — диаграмма кластера
- Force —Механическая диаграмма, диаграмма направленной силы
- Histogram —- Гистограмма (данные график распределения)
- Упаковка --- Схема упаковки
- Раздел — карта разделов
- Pie —- круговая диаграмма
- Стек — диаграмма стека
- Tree —- Дендрограмма
- Treemap — карта матричного дерева.
Глава 13 Круговая диаграмма
Производство этой главыодининдивидуальныйкруговая диаграмма. Применение мак существуетсередина, самым простым является дакруговая. Диаграмма, благодаря этой статье вы, Воля, получите предварительное представление о индивидуальном макете.
данные
Предположим, есть данные в разделе нравиться и их нужно визуализировать:
var dataset = [ 30 , 10 , 43 , 55 , 13 ];Такое значение да невозможно отобразить прямым способом. Пример нравитьсярисоватькруглую Для части диаграммы вам необходимо знать начальный и конечный угол дуги. Эти значения не сохраняются в массиве. dataset середина。поэтому,Нужно использовать макет,Функция макета — вычислить данные, подходящие для рисования.
макет（данные Конвертировать）
Определить макет,
var pie = d3.layout.pie();Возвращаемое значение, присвоенное переменной пирог, в это время pie Можеткогда Делатьфункцияиспользовать。
var piedata = pie(dataset);будет массив dataset как pie() параметры, возвращаемое значение в пиодата. Таким образом, пиодата Сразуда Конвертироватьназадизданные。
Рисовать графику
для согласно преобразованным данным piedata Для рисования вам понадобится еще один инструмент: генератор. SVG Существует элемент под названием путь path,да SVG середина — самый мощный элемент, он может представлять собой любую другую графику. Как следует из названия, элемент пути создает различную графику, определяя сегмент «пути». Но да, путь да сложно просчитать, данные после конвертации по макету piedata Вычислить значение пути вручную по-прежнему сложно. для Мы реализуем эту задачу с помощью генератора да.
То, что здесь используется, называется генератором дуги.,Путь, способный генерировать дуги,потому Каждая часть круговой диаграммы представляет собой дугу.
var outerRadius = 150; //внешний радиус
var innerRadius = 100; //Внутренний радиус, для0 означает, что между серединами нет пробела
var arc = d3.svg.arc() //генератор дуги
.innerRadius(innerRadius) //Устанавливаем внутренний радиус
.outerRadius(outerRadius); //Устанавливаем внешний радиусРезультат, возвращаемый генератором дуги, присваивается дуга. В это время дуга Можеткогда Делатьодининдивидуальныйфункцияиспользовать,Пучок piedata Передайте параметр как, чтобы получить значение пути. Далее вы можете существовать SVG серединадобавить Графические элементы тоже. Первое существование svg внутридобавить В достаточном количестве (5индивидуальных) элементов индивидуальной группы (g) каждая индивидуальная группа используется для хранения связанных элементов дуги.
var arcs = svg.selectAll("g")
.data(piedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");Дальше по каждому g элемент,добавить в path 。
arcs.append("path")
.attr("fill",function(d,i){
return color(i);
})
.attr("d",function(d){
return arc(d); //вызов генератора дуги, получаем значение пути
});потому что arcs да тоже выбрал 5 индивидуальный g выбор набора элементов, так называемого append(“path”) назад,Каждыйиндивидуальный g Все в path . Имя атрибута значения пути да d, присвойте ему значение, возвращенное после вызова генератора дуги. Обратите внимание, что дуга(d) Параметры d да привязаны данные.
Кроме того, цвет даодининдивидуальныйцвет Сравниватьпримерправитель,Он может получить соответствующее значение цвета на основе индексного номера, переданного в,определениенравиться Вниз。
var color = d3.scale.category10(); //Есть десять видовцветизцвет СравниватьпримерправительЗатемсуществовать Каждыйодининдивидуальныйдугасередина Сердцедобавить втекст。
arcs.append("text")
.attr("transform",function(d){
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor","middle")
.text(function(d){
return d.data;
});arc.centroid(d) Можно вычислить центр дуги. Обратите внимание, что текст() да вернулся в d.data , не да d 。потому что Привязанный объект данных, который содержит d.startAngle、d.endAngle、d.data и т. д., среди которых d.data Значение целого числа до преобразования.
Глава 14. Схема направленной силы
Силовой Graph), алгоритм рисования. существуют. Располагайте узлы в двухмерном или трехмерном пространстве и соединяйте узлы линиями, которые называются связями. Длины соединяемых линий должны быть практически равными и по возможности непересекающимися. К узлам и соединительным линиям прикладывают силы, а сила да рассчитывается на основе взаимного расположения узлов и соединительных линий. По действию силы рассчитывается траектория движения узлов и линий, их энергия непрерывно уменьшается и, наконец, достигается устойчивое состояние с очень низкой энергией.
данные
исходныйданныенравиться Вниз：
var nodes = [ { name: «Гуйлинь» }, { name: «Гуанчжоу» },
{ name: «Сямэнь» }, { name: «Ханчжоу» },
{ name: "Шанхай" }, { name: «Циндао» },
{ name: «Тяньцзинь» } ];
var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 6 } ];макет（данные Конвертировать）
определениеодининдивидуальныйдиаграмма направленной силыизмакетнравиться Вниз。
var force = d3.layout.force()
.nodes(nodes) //Указываем массив узлов
.links(edges) //Указываем массив соединений
.size([width,height]) //Указываем диапазон области действия
.linkDistance(150) //Указываем длину соединения
.charge([-400]); //Взаимодействие между собойЗатем включите механику:
force.start(); //Начинаем работатьрисовать
С преобразованными данными вы можете рисовать. Есть три графических элемента:
Линия, сегмент линии, представляет собой соединение. Круг, круг, представляет собой узел. текст, текст, описывает узел.
Код выглядит следующим образом:
//добавить в Проводной
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);
var color = d3.scale.category20();
//добавить вузел
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(force.drag); //Разрешаем перетаскивание узла
//добавить в Текст, описывающий узел
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d){
return d.name;
});вызов call( force.drag ) Более поздние узлы можно перетаскивать. сила.перетаскивание() даодининдивидуальныйфункция,Воля Чтокак call() Параметры, элемент, выбранный до того, как Волякогда будет передан в force.drag() в функции.
Наконец, есть самый важный фрагмент кода. потому что чтодиаграмма направленной Сила постоянно движется, и существование обновляется каждое мгновение. Поэтому положения узлов и связей должны постоянно обновляться. диаграмма направленной силымакет force иметьодининдивидуальныйсобытие tick,Каждый раз достигается индивидуальный момент,Хочу все это,Просто напишите обновленный контент в его прослушивателе.
force.on("tick", function(){ //Для каждого индивидуального интервала времени
//Обновить соединениекоординировать
svg_edges.attr("x1",function(d){ return d.source.x; })
.attr("y1",function(d){ return d.source.y; })
.attr("x2",function(d){ return d.target.x; })
.attr("y2",function(d){ return d.target.y; });
//Обновить узелкоординировать
svg_nodes.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
//возобновлятьхарактеркоординировать
svg_texts.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
});
Глава 15. Древовидная диаграмма
Древовидная диаграмма может представлять включенные и включенные отношения между узлами.
сейчасиметьданныенравиться Вниз：
{
"name":"серединастрана",
"children":
[ {
"name":"Чжэцзян" ,
"children":
[
{"name":«Ханчжоу» },
{"name":"Нинбо" },
{"name":"Вэньчжоу" },
{"name":"Шаосин" }
]
},
{
"name":"Гуанси" ,
"children":
[
{
"name":«Гуйлинь»,
"children":
[
{"name":"Район Сюфэн"},
{"name":"Цвет Цветовая область"},
{"name":"Район Сяншань"},
{"name":"Район Цисин"}
]
},
{"name":"Наньнин"},
{"name":"Лючжоу"},
{"name":"Фанченган"}
]
},
{
"name":"Хэйлунцзян",
"children":
[
{"name":"Харбин"},
{"name":"Цикикар"},
{"name":"Муданьцзян"},
{"name":"Дацин"}
]
},
{
"name":"Синьцзян" ,
"children":
[
{"name":"Урумчи"},
{"name":"Карамай"},
{"name":"Турфан"},
{"name":"Хами"}
]
}
]
}этот абзацданныевыражать：“серединастрана – Название провинции – «Название города» включено во включенное отношение.
Создайте HTTP-сервер (решите проблему, связанную с тем, что Chrome не может читать локальные файлы). 1. Установите узел 2.npm install http-server -g 3. Выполнить в каталоге http-server -c-1 4.localhost:8080/xxxx.html
макет（данные Конвертировать）
определениеодининдивидуальныйкластерная диаграммамакет：
var tree = d3.layout.tree()
.size([width, height-200]) //Установить размер
.separation(function(a, b) { return (a.parent == b.parent ? 1 : 2); });//Устанавливаем интервал между узламиДалее конвертируем данные:
d3.json("city_tree.json", function(error, root) {
var nodes = tree.nodes(root);
var links = tree.links(nodes);
console.log(nodes);
console.log(links);
}рисовать
D3 В основном для нас уже подготовлена функция рисования: d3.svg.diagonal(). 。этотдаодининдивидуальныйдиагональстановитьсяустройство,Только Нужно ввести дваиндивидуальныйвершинакоординировать,Можно построить кривую Безье.
Создайте индивидуальный диагональный генератор:
var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });projection() индивидуальный конвертер точек, по умолчанию да [ d.x , d.y ], то есть сохранить исходные координаты неизменными, если они записаны как [ d.y , d.x ] , то есть да говорит, что для любой входной вершины поменять местами x и y координировать.
рисовать Соединятьчас,использоватьметоднравиться Вниз：
var link = svg.selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", diagonal); //использовать диагональный генераторстиль
.node circle {
fill:#FFF;
stroke: steelblue;
stroke-width: 1.5px;
}
.node {
font: 12px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
Глава 16. Визуализация карты
существоватьданные Визуализациясередина,Карта да – очень важная часть. Многие ситуации будут связаны с картой,Каково население каждой провинции в нравиться середина?,ВВП и т. д.,Все можно связаться вместе с картой существования.
D3картарисовать Нужно сделать карту JSON файл, будет JSON Формат, применяемый к географическим файлам, называется GeoJSON документ.
- функция проекции
var projection = d3.geo.mercator()//функция проекции
.center([107, 31])//Установим центральное положение карты - долготу и широту
.scale(850)//Установить коэффициент увеличения
.translate([width/2, height/2]);//Установить переводпотому что GeoJSON Файл середина данных карты, вся информация о долготе и широте. Все они трехмерные, а тот, что отображается на веб-странице, двухмерный, поэтому вам нужно установить один проекции для преобразования широты и долготы. Показано на нравиться,использовать d3.geo.mercator() проекционный метод.
- Генератор географических маршрутов
для Понятно根据картаизгеографияданныерожденныйстановиться SVG середина path Необходимо использовать значение пути элемента. d3.geo.path(), называемый генератором географического пути.
var path = d3.geo.path()
.projection(projection);projection() Функция по настройке генератора проекции, передать проекцию, определенную выше, в Вот и все.
- Загрузка файлов и карт
d3.json("world.json", function(error, root) {
if (error)
return console.error(error);
console.log(root.features);
svg.selectAll("path")
.data( root.features )
.enter()
.append("path")
.attr("stroke","#000")
.attr("stroke-width",1)
.attr("fill", function(d,i){
return color(i);
})
.attr("d", path ) //использовать Генератор географических маршрутов
.on("mouseover",function(d,i){
d3.select(this)
.attr("fill","yellow");
})
.on("mouseout",function(d,i){
d3.select(this)
.attr("fill",color(i));
});
});
Другие карты с открытым исходным кодом
Сайт для изучения D3
предположение
- Посмотреть больше
- Практикуйтесь больше
- Думайте слишком много
Заявление об авторских правах: Содержание этой статьи добровольно предоставлено пользователями Интернета, а мнения, выраженные в этой статье, представляют собой только точку зрения автора. Этот сайт предоставляет только услуги по хранению информации, не имеет никаких прав собственности и не принимает на себя соответствующие юридические обязательства. Если вы обнаружите на этом сайте какое-либо подозрительное нарушение авторских прав/незаконный контент, отправьте электронное письмо, чтобы сообщить. После проверки этот сайт будет немедленно удален.
Издатель: Full stack программист и руководитель стека, укажите источник для перепечатки: https://javaforall.cn/187084.html Исходная ссылка: https://javaforall.cn
Учебное пособие по Jetpack Compose для начинающих, базовые элементы управления и макет
Код js веб-страницы, фон частицы, код спецэффектов
【новый! Суперподробное】Полное руководство по свойствам компонентов Figma.
🎉Обязательно к прочтению новичкам: полное руководство по написанию мини-программ WeChat с использованием программного обеспечения Cursor.
[Забавный проект Docker] VoceChat — еще одно приложение для мгновенного чата (IM)! Может быть встроен в любую веб-страницу!
Как реализовать переход по странице в HTML (html переходит на указанную страницу)
Как решить проблему зависания и низкой скорости при установке зависимостей с помощью npm. Существуют ли доступные источники npm, которые могут решить эту проблему?
Серия From Zero to Fun: Uni-App WeChat Payment Practice WeChat авторизует вход в систему и украшает страницу заказа, создает интерфейс заказа и инициирует запрос заказа
Серия uni-app: uni.navigateЧтобы передать скачок значения
Апплет WeChat настраивает верхнюю панель навигации и адаптируется к различным моделям.
JS-время конвертации
Обеспечьте бесперебойную работу ChromeDriver 125: советы по решению проблемы chromedriver.exe не найдены
Поле комментария, щелчок мышью, специальные эффекты, js-код
Объект массива перемещения объекта JS
Как открыть разрешение на позиционирование апплета WeChat_Как использовать WeChat для определения местонахождения друзей
Я даю вам два набора из 18 простых в использовании фонов холста Power BI, так что вам больше не придется возиться с цветами!
Получить текущее время в js_Как динамически отображать дату и время в js
Вам необходимо изучить сочетания клавиш vsCode для форматирования и организации кода, чтобы вам больше не приходилось настраивать формат вручную.
У ChatGPT большое обновление. Всего за 45 минут пресс-конференция показывает, что OpenAI сделал еще один шаг вперед.
Copilot облачной разработки — упрощение разработки
Микросборка xChatGPT с низким кодом, создание апплета чат-бота с искусственным интеллектом за пять шагов
CUDA Out of Memory: идеальное решение проблемы нехватки памяти CUDA
Анализ кластеризации отдельных ячеек, который должен освоить каждый&MarkerгенетическийВизуализация
vLLM: мощный инструмент для ускорения вывода ИИ
CodeGeeX: мощный инструмент генерации кода искусственного интеллекта, который можно использовать бесплатно в дополнение к второму пилоту.
Машинное обучение Реальный бой LightGBM + настройка параметров случайного поиска: точность 96,67%
Бесшовная интеграция, мгновенный интеллект [1]: платформа больших моделей Dify-LLM, интеграция без кодирования и встраивание в сторонние системы, более 42 тысяч звезд, чтобы стать свидетелями эксклюзивных интеллектуальных решений.
LM Studio для создания локальных больших моделей
Как определить количество слоев и нейронов скрытых слоев нейронной сети?
