Рубрики
Без рубрики

Добавление графики в приложение React с D3 – Circle Chart

Проверьте мои книги на Amazon в https://www.amazon.com/john-au-uyeung/e/b08ft5nt62 Подписаться на мой … Теги от реагирования, JavaScript, CodeNewbie, начинающих.

Проверьте мои книги на 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”