d3.js 다른 데이터로 동일한 svg 객체를 생성하십시오.

스크립트가있어서 잘 작동하고 필요한 코드 다이어그램을 만들 수 있습니다. 하지만 다른 .svg 파일을 다른 div에 있지만 다른 행렬로 만들고 싶습니다. 새 SVG에 대해 동일한 스크립트를 복제해야합니까, 아니면보다 효율적인 방법으로 할 수 있습니까?d3.js 다른 데이터로 동일한 svg 객체를 생성하십시오.

내 코드 here을 찾을 수 있습니다.

이제 내 .Js 스크립트 내가 id chart1

출처

2017-12-06 Daniel Chepenko

흠, 그것은 그대로 당신이 가지고있는 코드 힘든이다. 정말로 "setup", "drawing"및 "appending"섹션을 함수 에 캡슐화해야합니다. 이렇게하면 특정 svg 인스턴스 (단 하나의 하드 코드 된 인스턴스가 아닌)에서 작업 할 수 있습니다. d3에서 재사용 가능한 구성 요소에 대한 개요를 보려면 https://bost.ocks.org/mike/chart/를보십시오. – Fraser

@Fraser가 응답 해 주셔서 감사합니다. 글쎄요, 요점을 봅니다. 실제로 로직을 캡슐화하는 것은 큰 문제가 아닙니다. 어떻게'div'와'svg'를 연결할 수 있는지 이해할 수 없습니다. 나는 다른 이드와 함께 div를 만들고이 이드를 위해 새로운 svg를 만드는 것이 좋은 방법이라고 생각하지 않는다. 내 스크립트에서 두 개의 함수'drawChordWithMatrix (matrix_T1_T2)','drawChordWithMatrix (matrix_T2_T3)'를 실행해야한다고 생각합니다. –

잘 받아 들여진 대답은 정확하게 - 그리고 접근입니다 - 당신은 반복 할 필요가있는 코드를 캡슐화하는 재사용 가능한 함수에 매개 변수를 전달합니다 ... – Fraser

한 가지 방법에 drawChordWithMatrix(matrix_T2_T3)를 실행하려면 어떻게해야 내가 생각할 수있는 id chart 와 사업부에 대한 코드를 보여 drawChordWithMatrix(matrix_T1_T2)를 사용하는 것은

1)는 drawChordWithMatrix로 SVG 생성을 이동입니다

그래서 SVG를 첨부해야하는 ID를 전달해야합니다. 이런 식으로 function drawChordWithMatrix(matrix, id), 그리고 당신은이 함수에서 SVG를 만듭니다.

var svg = d3.select(id).append("svg")//selecting on basis of ID. 
      .attr("width", (width + margin.left + margin.right)) 
      .attr("height", (height + margin.top + margin.bottom));

2) 다음 움직임 모두 동일한 범위를 갖도록 drawChordWithMatrix 등으로 페이드 fadeOnChord 같은 모든 기능 ...

작업 코드 here

출처

2017-12-06 06:09:17 Cyril

d3.js 다른 데이터로 동일한 svg 객체를 생성하십시오.

답변

관련 문제