각도 2 (angular-cli 1.0.0-beta.17)를 가진 d3

Question

내 angular2 프로젝트에서 D3을 사용하는 데 문제가 있습니다. '시간이 정의되지 않았습니다'또는 '시간이 typeof D3의 속성이 아닙니다'와 같은 오류가 계속 발생합니다.

d3을 npm으로 설치하고 타이핑을 설치했습니다 : npm install d3 --save. 내 구성 요소에 import * as d3 from 'd3';이 있는데 라이브러리를 잘 찾을 수 있습니다.

angular-cli.json에 "addons": [{ "d3" : "vendor/d3/build/d3.js"}], packages": [{ "d3" : "vendor/d3/build/d3.js"}],을 추가하려고했습니다. 둘 다 일하지 않아.

"devDependencies": { "@types/d3-array": "^1.0.5", "@types/d3-axis": "^1.0.5", "@types/d3-brush": "^1.0.5", "@types/d3-chord": "^1.0.4", "@types/d3-collection": "^1.0.4", "@types/d3-color": "^1.0.4", "@types/d3-dispatch": "^1.0.4", "@types/d3-drag": "^1.0.5", "@types/d3-dsv": "^1.0.29", "@types/d3-ease": "^1.0.4", "@types/d3-force": "^1.0.5", "@types/d3-format": "^1.0.5", "@types/d3-geo": "^1.2.3", "@types/d3-hierarchy": "^1.0.4", "@types/d3-hsv": "0.0.3", "@types/d3-interpolate": "^1.1.5", "@types/d3-path": "^1.0.4", "@types/d3-polygon": "^1.0.4", "@types/d3-quadtree": "^1.0.4", "@types/d3-queue": "^3.0.4", "@types/d3-random": "^1.0.5", "@types/d3-request": "^1.0.1", "@types/d3-scale": "^1.0.4", "@types/d3-scale-chromatic": "^1.0.1", "@types/d3-selection": "^1.0.5", "@types/d3-selection-multi": "^1.0.3", "@types/d3-shape": "^1.0.5", "@types/d3-time": "^1.0.4", "@types/d3-time-format": "^2.0.4", "@types/d3-timer": "^1.0.5", "@types/d3-transition": "^1.0.5", "@types/d3-voronoi": "^1.0.4", "@types/d3-zoom": "^1.0.5", "@types/jasmine": "^2.2.30", "@types/node": "^6.0.42",

의존성 :

"@types/d3": "^4.2.38", "d3": "^4.3.0",

나는이 예제를 사용하고 있습니다 : 내 응용 프로그램에서 http://codepen.io/stefanjudis/pen/gkHwJ

package.json는 다음 dev에 종속성이 포함되어 있습니다. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 감사합니다

Answer 1

귀하의 앱이 D3 v4를 사용하는 동안 API로 큰 변화가있는 동안 기지로 사용하는 예는 http://d3js.org/d3.v3.min.js에서 D3 v3을 참조합니다.

d3.time 더 이상 존재하지 않으므로 코드를 새 API에 적용해야합니다. 예를 들어, Codepen 예에서 라인 (82), 당신은 링크 :

var parse = d3.time.format('%Y-%m-%d'); 

가 변환 할 수 있습니다

var parse = d3.timeFormat('%Y-%m-%d'); 

당신은 주요 D3의 REPO index.js 또는에서의 module export에서 볼 수 있듯이 관련 추가 정보는 d3 time format module입니다.

위의 index.js 파일을 참조로 유지하면서 오래된 구문 (예 : d3.scale.linear이 이제 d3.scaleLinear)마다 제거하고 반복하십시오. 그러면 모든 오류가 제거됩니다.