- D3.js javascript chart library version upgrade migration
https://github.com/d3/d3/blob/main/CHANGES.md
//-------------------------------------
v7
https://github.com/d3/d3/releases/tag/v7.0.0
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-70 - 2021-06
- ESM 사용, Node.js 12 이상 필요
//-----------------------------------------------------------------------------
//-------------------------------------
v6
https://github.com/d3/d3/releases/tag/v6.0.0
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-60 - 2020-08
- ES6만 지원
- v5 -> v6 migration
https://observablehq.com/@d3/d3v6-migration-guide
//-------------------------------------
- d3.event 삭제
https://observablehq.com/@d3/d3v6-migration-guide#events
selection.on("mousemove", function(d) { ... d3.event() 로 이벤트 처리 ... }) // v5
selection.on("mousemove", function(event, d) { … event 로 이벤트 처리 ... }) // v6
- d3.mouse, d3.touch, d3.touches, d3.clientPoint -> d3.pointer 로 변경
https://observablehq.com/@d3/d3v6-migration-guide#pointer
//-------------------------------------
- 이름 변경
d3.histogram -> d3.bin.
d3.scan -> d3.leastIndex.
d3.voronoi -> d3.Delaunay.
d3.nest -> d3.group , d3.rollup
//-------------------------------------
- 삭제
d3.map -> Map.
d3.set -> Set.
d3.keys -> Object.keys.
d3.values -> Object.values.
d3.entries -> Object.entries.
//-------------------------------------
- d3.interpolateTransformCss 에서 절대 단위 사용
const interpolator = d3.interpolateTransformCss( "translateY(80%) scale(2)", "translateX(3em) rotate(5deg)"); // v5
);
->
const interpolator = d3.interpolateTransformCss( "translateY(800px) scale(2)", "translateX(30px) rotate(5deg)" ); //v6
//-----------------------------------------------------------------------------
//-------------------------------------
v5
https://github.com/d3/d3/releases/tag/v5.0.0
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-50 - 2018-03
- 비동기에 Promise 사용
d3.csv("file.csv", function(error, data) { console.log(data); }); // v4
->
d3.csv("file.csv").then(function(data) { console.log(data); }); // v5
Remove d3-request; add d3-fetch.
Remove d3-queue; see Promise.all.
Remove d3.schemeCategory20* categorical color schemes.
//-----------------------------------------------------------------------------
//-------------------------------------
v4
https://github.com/d3/d3/releases/tag/v4.0.0
- 매우 많은 변경
- 모듈러 방식으로 나누어짐
- canvas 이용 렌더링 가능 : context()
- v4 API 레퍼런스
https://github.com/d3/d3/blob/v4.13.0/API.md
- 마이그레이션 참고 문서
https://github.com/d3/d3/blob/main/CHANGES.md#changes-in-d3-40 - 2016-06
https://iros.github.io/d3-v4-whats-new/#1
//-------------------------------------
- 이름 변경, Namespacing
d3.scale.linear -> d3.scaleLinear
d3.scale.ordinal -> d3.scaleOrdinal
d3.time.format -> d3.timeFormat
d3.csv.parse -> d3.csvParse
d3.svg.axis -> d3.axisTop , d3.axisBottom, ... // svg 삭제됨
d3.svg.chord -> d3.ribbon
d3.behavior.drag -> d3.drag // behavior 삭제됨
d3.layout.treemap -> d3.treemap // layout 삭제됨
d3.layout.force -> d3.forceSimulation
d3.geom.polygon -> d3.polygonHull , ... // geom 삭제됨
d3.scale.category10() -> d3.scaleOrdinal(d3.schemeCategory10)
https://github.com/d3/d3/blob/main/API.md#color-schemes-d3-scale-chromatic
bins() -> thresholds()
dx -> x0 , x1
set.forEach -> set.each -> (v6) new Set().forEach
map.forEach -> map.each -> (v6) new Map().forEach
https://iros.github.io/d3-v4-whats-new/#47
d3.ease -> d3.easeElastic, ...
d3.time.format -> d3.timeFormat
d3.time.format.utc -> d3.utcFormat
d3.time.format.iso -> d3.isoFormat
//-------------------------------------
- Selections
https://iros.github.io/d3-v4-whats-new/#18
배열 -> 객체로 변경됨
부모를 변경시키지 않음
- merge()
- selection.call() 호출함수에 인자필요
d3.selectAll("div.states").call(function() { this.style('color', 'red'); }) // v3
->
d3.selectAll("div.states").call(function(statesSelection) { statesSelection.style('color', 'red'); }) // v4
- Multi-Selections
d3.select("h4").style({ color: "red", background: "yellow" }); // v3
- v3처럼 가능하게 하려면 d3-selection-multi 모듈 로드 필요
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
//-------------------------------------
- Axes
https://iros.github.io/d3-v4-whats-new/#42
- Dispatching
dispatcher.foo.call(that, "Hello, Foo!"); // v3
dispatcher.call("foo", that, "Hello, Foo!"); // v4
- Quadtree
var quadtree = d3.geom.quadtree().extent([[0, 0], [width, height]]); quadtree(data); // v3
var quadtree = d3.quadtree().extent([[0, 0], [width, height]]).addAll(data); // v4
- file load
d3.xhr -> d3.request -> (v5) [d3-fetch], d3.csv, ...
//-------------------------------------
https://github.com/d3/d3/blob/main/CHANGES.md#shapes-d3-shape
- interpolate -> courve
var lineFun = d3.line().x().y().interpolate("basis") // v3
->
var lineFun = d3.line().x().y().curve(d3.curveBasis); // v4
- 인자 이름 변경
linear -> d3.curveLinear
linear-closed -> d3.curveLinearClosed
step -> d3.curveStep
step-before -> d3.curveStepBefore
step-after -> d3.curveStepAfter
basis -> d3.curveBasis
basis-open -> d3.curveBasisOpen
basis-closed -> d3.curveBasisClosed
bundle -> d3.curveBundle
cardinal -> d3.curveCardinal
cardinal-open -> d3.curveCardinalOpen
cardinal-closed -> d3.curveCardinalClosed
monotone -> d3.curveMonotoneX
//-------------------------------------
- Time
var parseTime = d3.time.format("%c").parse; // v3
->
var parseTime = d3.timeParse("%c"); // v4
d3.time.scale() -> d3.scaleTime()
//-----------------------------------------------------------------------------
//-------------------------------------
v3
https://github.com/d3/d3/releases/tag/v3.0.0 - 2013-07
- new geographic projection system , Plugins
- v3 API 레퍼런스
https://github.com/d3/d3-3.x-api-reference/blob/master/API-Reference.md
- v2 -> v3 migration
https://github.com/d3/d3-3.x-api-reference/blob/master/Upgrading-to-3.0.md
'Code > JavaScript' 카테고리의 다른 글
| d3.js 버전 업그레이드 방법 (v3->v7) (마이그레이션) (0) | 2022.07.19 |
|---|---|
| [Javascript] *.js 파일에 인자 전달하기 (0) | 2022.07.17 |
| [Javascript] D3.js 차트 라이브러리 사용법 (0) | 2022.07.15 |
| [Javascript] Callback 함수의 추가 파라메터 설정 (0) | 2022.05.02 |
| [Javascript] 키보드 입력 키값 (0) | 2022.05.01 |
| [Javascript] Deno Web Framework (0) | 2022.04.21 |
댓글을 달아 주세요