오픈 소스 모험: 에피소드 30: D3 및 Parcel을 사용하여 러시아 탱크 손실 시각화

15113 단어 d3javascript
이전 에피소드에서는 도구를 사용하지 않고 D3를 사용하여 간단한 그래프를 만들었습니다. 좀 더 현대적인 테이크를 해보자.

새 앱 만들기



다양한 번들러가 있으며 대부분은 몇 가지 어려운 구성이 필요합니다.

이번에는 parcel 을 시도해 봅시다. 상자에서 꺼내자마자 바로 사용할 수 있기 때문입니다.

$ npm init -y
$ npm install d3 parcel


약속한 대로 수행하지는 않지만 여전히 웹팩이나 롤업보다 구성이 훨씬 적습니다.

GitHub 페이지에 대한 소포 구성



Parcel의 첫 번째 문제는 절대 경로로 모든 것을 출력하므로 앱이 도메인의 최상위 수준에서 호스팅하는 경우에만 작동한다는 것입니다.

GitHub 페이지가 설정되는 방식이 아니며 전반적으로 끔찍한 기본값입니다. 기본값은 상대 경로여야 어디에서나 제공될 수 있습니다. 작동하게 하려면 --public-url . 를 parcel 로 전달해야 합니다.

패키지.json



우리는 두 가지를 바꿔야 합니다. 진입점으로 source 항목을 설정합니다. 그리고 Parcel에 우리가 상대 URL을 원한다고 말하여 GitHub 페이지와 함께 작동하도록 합니다.

{
  "name": "episode-30",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "parcel:build": "parcel build --public-url ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "d3": "^7.4.2",
    "parcel": "^2.4.1"
  },
  "source": "src/index.html"
}


소포 문제가 거의 끝났습니다.

src/index.html



여기서 우리는 두 개의 스크립트를 하나로 줄일 수 있습니다. 작동하려면 type="module" 주석을 추가해야 합니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
    <h1>Russian Tank Losses</h1>
    <script src="app.js" type="module"></script>
  </body>
</html>


src/app.css



이전 버전에서 변경되지 않았습니다.

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


src/app.js



그리고 소포 문제가 하나 더 있습니다. 기본적으로 .csv 파일과 같은 정적 자산을 빌드 디렉토리에 복사하지 않습니다. 이에 대한 많은 솔루션이 있습니다. 우리가 사용할 방법은 원하는 자산을 가져오는 것url:입니다.

전반적으로 이전 에피소드 버전에서 세 줄만 변경되었습니다.

먼저 import * as d3 from "d3"로 d3를 가져와야 합니다. import {csv, scaleLinear, scaleTime, extent, select, axisBottom, axisLeft, line} from d3 와 같은 특정 함수를 가져올 수도 있지만 D3 API는 실제로 이를 위해 생성되지 않았으므로 권장하지 않습니다.

두 번째로 소포csv에 번들링이 필요함을 알려야 합니다. csvUrl는 적절한 해시와 함께 Parcel 번들 URL이 됩니다. 이것이 자산을 수행하는 유일한 방법은 아니지만 충분히 잘 작동합니다.

그런 다음 csvUrl를 let data = await d3.csv(csvUrl, parseRow)와 함께 사용해야 합니다.

다른 것은 변경할 필요가 없었습니다.

import * as d3 from "d3"
import csvUrl from 'url:./russia_losses_equipment.csv'

let parseRow = ({date,tank}) => ({date: new Date(date), tank: +tank})

let main = async () => {
  let data = await d3.csv(csvUrl, parseRow)
  data.unshift({date: new Date("2022-02-24"), tank: 0})

  let xScale = d3.scaleTime()
    .domain(d3.extent(data, d => d.date))
    .range([0, 600])

  let yScale = d3.scaleLinear()
    .domain(d3.extent(data, d => d.tank))
    .range([400, 0])

  let svg = d3.select("body")
    .append("svg")
      .attr("width", 800)
      .attr("height", 600)
    .append("g")
      .attr("transform", "translate(100, 100)")

  svg.append("g")
    .call(d3.axisLeft(yScale))

  svg.append("g")
    .attr("transform", "translate(0, 400)")
    .call(d3.axisBottom(xScale))

  svg.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "red")
    .attr("stroke-width", 1.5)
    .attr("d", d3.line()
      .x(d => xScale(d.date))
      .y(d => yScale(d.tank)))
}

main()


소포를 사용해야합니까?



Parcel은 제로 구성 번들링을 제대로 수행하지 않았고 해싱을 끌 수 없는 것과 같은 몇 가지 성가신 일이 있지만(--no-content-hash 콘텐츠 해시를 정적 해시로 대체함) 여전히 다른 JavaScript 번들러에 비해 크게 개선되었습니다. .

Svelte 또는 React와 같은 프레임워크를 사용하는 경우 이미 번들러 설정이 있으므로 이를 사용하는 것이 좋습니다. 하지만 그렇지 않다면 Parcel이 현재 최고의 저구성 솔루션일 수 있습니다.

지금까지의 이야기



저는 이것을 GitHub Pagesyou can see it here에 배포했습니다.

다음에 온다



다음 에피소드에서는 이 앱을 Svelte로 포팅합니다. 그리고 나서 우리는 러시아가 탱크가 바닥날 때까지 얼마나 걸릴지 알아내려고 노력할 것입니다.
기본: JWT - JSON 웹 토큰
웹사이트 UI/UX – 얕고 평평한 링크 계층구조가 Google 검색으로 쉽게 색인화되는가? (ScrapBox의 예)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage