Проверьте мои книги на Amazon в https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62
Подписаться на мой список электронной почты сейчас http://jauyeung.net/subscribe/
D3 позволяет добавлять графику в интерфейсное веб-приложение легко.
Vue – популярный интерфейсный веб-каркас.
Они отлично работают вместе. В этой статье мы посмотрим, как добавить графику в приложение Vue с D3.
Круг график
Мы можем создать диаграмму круга с D3 в нашем приложении React.
Например, мы можем написать:
import React, { useEffect } from "react"; import * as d3 from "d3"; export default function App() { useEffect(() => { const width = 400; const height = 400; const data = [10, 28, 35]; const colors = ["green", "lightblue", "yellow"]; const svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height); const g = svg .selectAll("g") .data(data) .enter() .append("g") .attr("transform", function (d, i) { return "translate(0,0)"; }); g.append("circle") .attr("cx", function (d, i) { return i * 75 + 50; }) .attr("cy", function (d, i) { return 75; }) .attr("r", function (d) { return d * 1.5; }) .attr("fill", function (d, i) { return colors[i]; }); g.append("text") .attr("x", function (d, i) { return i * 75 + 25; }) .attr("y", 80) .attr("stroke", "teal") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text((d) => { return d; }); }, []); return (); }
Мы создаем СВГ
Выбрав Тело
а затем добавьте СВГ
к этому.
И мы также устанавливаем ширина
и Высота
из СВГ.
Это делается с:
const svg = d3 .select("body") .append("svg") .attr("width", width) .attr("height", height);
Затем мы создаем группу с данными, написав:
const g = svg .selectAll("g") .data(data) .enter() .append("g") .attr("transform", function(d, i) { return "translate(0,0)"; });
данные
имеет данные.
Далее мы добавляем круги, написав:
g.append("circle") .attr("cx", function(d, i) { return i * 75 + 50; }) .attr("cy", function(d, i) { return 75; }) .attr("r", function(d) { return d * 1.5; }) .attr("fill", function(d, i) { return colors[i]; });
Мы добавляем усадьба
и CY
атрибуты по вызову Attr
Отказ
R
имеет радиус, и заполнить
Имеет цвет фона для каждого круга.
Затем мы добавляем текст, который идет с кругами, написав:
g.append("text") .attr("x", function(d, i) { return i * 75 + 25; }) .attr("y", 80) .attr("stroke", "teal") .attr("font-size", "10px") .attr("font-family", "sans-serif") .text((d) => { return d; });
Мы называем Добавить
с «Текст»
аргумент
А потом мы установили х
и y
атрибуты положения текста.
Затем мы устанавливаем цвет текста с инсульт
Отказ
Размер шрифта
имеет размер шрифта и Семья шрифта
Имеет семью шрифта.
текст
Метод принимает обратный вызов, который возвращает текст.
Заключение
Мы можем добавить диаграмму круга в наше приложение React с D3.
Пост Добавление графики в приложение React с D3 – Circle Chart появился первым на Веб dev Отказ
Оригинал: “https://dev.to/aumayeung/adding-graphics-to-a-react-app-with-d3-circle-chart-436h”