- 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



반응형
Posted by codens
TAG ,

댓글을 달아 주세요