캔버스의 인스턴스 가져 오기 d3js

Question

d3js를 처음 사용하고 d3js 캔버스 객체의 인스턴스를 저장하려고합니다. 저장 한 후에는 저장된 d3js 캔버스의 요소를 얻고 싶습니다.

EDITED 질문 : 는 기본적으로 내가 뭘하고 싶은 것은 그들이 그려 후 d3.json의 함수 내에서 그려 요소를 액세스 할 수 있습니다. 다음은

내 코드의 HTML과 자바 스크립트입니다 :

HTML Before d3.json load: 
<div id="model_container" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 20%"> 

HTML After d3.json load: 
<div id="model_container" style="position: fixed; top: 0px; bottom: 0px; left: 0px; right: 20%"> 
. 
. 
. 
. 
<g id='reactions'> 
    <g id='r0' class='reaction'> 
     <g class='reaction-label-group' transform='translate(360,500)'> 
     <text class='reaction-label label'>HELLO</text> 
     <g id='r1' class='reaction'> 
     <g class='reaction-label-group' transform='translate(365,500)'> 
      <text class='reaction-label label'>HELLO2</text> 
</div> 

JavaScript: 
var canvasMap = d3.json(document.getElementById("model").value, function(error, data) { 
    if (error) console.warn(error); 
    var options = {menu: 'all', canvas_size_and_loc: { x: '200', y: '200', width: '5000', height: '5000' }}; 
    var b = escher.Builder(null, data, null, d3.select('#model_container'), options); 
    b.map.new_reaction_from_scratch('GAPD',{ x: 350, y: 315 }, 90); 
    b.map.new_reaction_from_scratch('PGK',{ x: 950, y: 315 }, 90); 
    b.map.select_all(); 
    }); 

    canvasMap.selectAll(".reaction-label-group").each(function (d) { console.log(d) }); 

Answer 1

첫째, var에 canvasMap = d3.json() 당신이 그것을 찾고있는 것을 아무것도 반환하지 않습니다 :

반환 새로운 요청은 둘째 와 함께를 기본 MIME 형식 응용 프로그램/JSON (API docs)

를 지정된 URL에서 JSON 파일을 얻을 수 있습니다

가 기본적으로 내가 뭘하고 싶은 것은 그들이 그려 후 d3.json의 함수 내에서 그려 있는 요소에 액세스입니다 : D 제가 생각하는 것은 문제의 핵심입니다.

당신이 그렇게 같은 d3.json을 가진 요소 (또는 다른 방법) 그리는 경우 : 다음

d3.json("file.json", function(error, data) { 
    // add elements based on json data: 
    var select = svg.selectAll("path") 
     .data(data) 
     .enter() 
     ..... // and so on 
}) 

이 코드를 사용하여 이러한 요소 선택할 수 없습니다 :

var selection; 
d3.json("file.json", function(error, data) { 
    // add elements based on json data: 
    selection = svg.selectAll("path") 
     .data(data) 
     .enter() 
     ..... 
}) 
selection.attr("fill","steelblue") 

을

왜? d3.json은 비동기식이므로 코드는 작성된 순서대로 실행되지 않습니다. d3.json의 콜백 함수 인 d3.json("file",function(error,data) {과 }) 사이의 코드는 json 파일이로드 된 후에 만 ​​실행됩니다. 해당 파일이로드되는 동안 콜백 외부의 코드는 계속 실행됩니다. 내 라인 selection.attr("fill","steelblue")은 아무것도 선택하지 않기 때문에 아무 것도하지 않습니다. json이 아직로드 중입니다.

당신이 콜백에 추가 된 것을 선택합니다

는 콜백 자체에 그 코드를 삽입 :

var selection; 
d3.json("file.json", function(error, data) { 
    // add elements based on json data: 
    selection = svg.selectAll("path") 
     .data(data) 
     .enter() 
     ..... 

    selection.attr("fill","steelblue") 
}) 

파일이로드 된 후 요소가 추가됩니다 후 실행할 수 있습니다.