모듈 묶음 대 전체 D3 번들을 사용할 때 D3.v4 힘 그래프가 깨집니다.

저는 D3 힘 지향 그래프로 주변을 둘러 보았습니다. D3.v4의 https://bl.ocks.org/mbostock/4062045. 모든 것은 최신의 완전한 D3 빌드/번들로 잘 동작합니다.모듈 묶음 대 전체 D3 번들을 사용할 때 D3.v4 힘 그래프가 깨집니다.

로드 된 JS 라이브러리의 크기를 줄이기 위해 롤업 기반 https://www.npmjs.com/package/d3-v4-bundler을 사용하여 끝내려고했습니다. 다른 관련성이없는 다른 모든 D3.v4 그래프는 롤업 번들로 제공되는 "직접 선택한"모듈과 메서드로 제대로 작동하지만 d3 force에는 문제가 있습니다. 이미 초기에 코드의

D3-힘이 방법을 사용하기 :

var simulation = d3.forceSimulation() 
    .force("link", d3.forceLink().id(function (d) { return d.id; })) 
    .force("charge", d3.forceManyBody()) 
    .force("center", d3.forceCenter(svgwidth/2, svgheight/2));

오류가 발생합니다 : "catch되지 않은 형식 오류를 : 정의되지 않은 재산 '힘'을 읽을 수 없습니다".

나는 d3-v4-bundler에서 모듈과 메소드의 모든 조합을 시도했지만 "d3"의 모든 것을 내보낼 때만, 즉 모든 것을 사용하면 강제력 그래프가 작동합니다. 모든 모듈을 개별적으로 묶어도 작동하지 않습니다. "d3-force"자체는 "d3-collection", "d3-dispatch", "d3-quadtree"및 "d3-timer"를 필요로하지만, 이들은 모두 d3-v4-bundler를 통해 올바르게 번들됩니다.

d3.forceSimulation(). force가 중단되는 번들링 프로세스에서 누락 될 수있는 "d3-force"에 대한 (외부) 중요 종속성이 있습니까? 또는 이것이 d3-v4-bundler 또는 롤업 자체에 뿌리를 둔 문제 일 수 있습니까?

출처

2017-12-26 Alec Acorn

'npm' 또는'yarn'을 사용하고 있습니까? 'package-lock.json' 또는'yarn.lock'에 다양한 d3 모듈의 중복 버전이 없는지 확인할 수 있습니까? –

아니, 그건 문제가되지 않는 것 같습니다. 나는 이것을 이제는 축소로 추적 할 수 있었다. d3-v4-bundler는 uglify-js를 사용하여 JS를 최소화합니다. 대부분의 모듈 + 메소드 조합은 원시 또는 최소화 된 상태로 잘 작동하는 것으로 보이지만 uglify-j로 최소화 할 경우 d3 강제가 깨지는 것 같습니다. 따라서, d3-force에서 "force"에 대한 선언이 잘못되거나, uglify-js가 너무 열정적 인 것처럼 보입니다. –

내 문제에 대한 답변을 찾았지만 그 이유는 그다지 알 수 없습니다.

어떤 이유에서든 d3-force의 일부 내용 또는 d3 모듈을 선택한 나의 결합 된 내용 중 하나가 d3-v4-bundler의 Uglifyjs로 축소되어 "강제"위반을 중단합니다. d3-v4-bundler의 uglifyjs 명령에서 "-c negate_iife = false"매개 변수를 제거하면 축소 된 코드조차도 d3-force로 생성 된 그래프에 대해 작동합니다. 물론 최소화 비율은 그다지 좋지는 않지만 분명히 가치 통합의 어떤 부분은 그렇지 않습니다.

큰 전문가는 아니지만, 실제 휴식 시간을 추적 할 수 있다면 유용 할 것입니다. "-c negate_iife = false"는 d3-force가 추가되거나 적어도 그렇게 보일 때까지 다른 모듈 번들에서 잘 작동합니다.

출처

2017-12-26 18:24:42

모듈 묶음 대 전체 D3 번들을 사용할 때 D3.v4 힘 그래프가 깨집니다.

답변

관련 문제