d3.js가 포함 된 하나의 XML로 여러 svg를 가져 오기

Question

현재 D3.js. D3.js가 웹 페이지에 여러 svg 요소를 그리는 데 적합한 지 궁금합니다. d3.xml 메서드를 찾아서 작동 시켰습니다.

처음에는 Raphaeljs로 놀고 있었지만, JS- 초보자로서 유용한 tuts/docs는 찾기가 어렵습니다. SVG를 webtool을 사용하여 JSON 객체로 변환 한 다음 1 js 파일에 삽입하여 많은 태그와 내용을 제거했습니다. 이렇게하면 HTTP 요청이 저장됩니다. 이제는 D3.js와 똑같은 것을 시도하고 어떤 것이 나를 적합하게하는지 보길 원합니다.

D3를 사용하여 다중 SVG 파일을 가져 오기위한 아이디어가 있습니까?

Answer 1

D3을 사용하여 작성할 수있는 SVG의 수는 제한이 없습니다. 모든 D3은 DOM에 액세스하여 브라우저가 SVG를 그리거나 SVG를 조작하는 방법을 알고 있도록 수정합니다. D3을 사용하면 요소에 더 쉽게 액세스하고 함께 작업 할 수 있습니다.

JSON 개체에서 SVG를 읽는 경우 여러 JSONS를 읽는 것만으로도됩니다.

는 "morley.csv"를 열고 데이터와 함께 작동합니다, 박스 플롯의 예에서 ...

d3.csv("morley.csv", function(error, csv) { 
    var data = []; 

    csv.forEach(function(x) { 
    var e = Math.floor(x.Expt - 1), 
     r = Math.floor(x.Run - 1), 
     s = Math.floor(x.Speed), 
     d = data[e]; 
    if (!d) d = data[e] = [s]; 
    else d.push(s); 
    if (s > max) max = s; 
    if (s < min) min = s; 
    }); 

    chart.domain([min, max]); 

    var svg = d3.select("body").selectAll("svg") 
     .data(data) 
    .enter().append("svg") 
     .attr("class", "box") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.bottom + margin.top) 
    .append("g") 
     .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
     .call(chart); 

    d3.select("button").on("click", function() { 
    svg.datum(randomize).call(chart.duration(1000)); // TODO automatic transitions 
    }); 
}); 

이, 예로서 D3js.org 웹 사이트에서 처음 두 예제를 가져 가라.

d3.json("flare.json", function(error, root) { 
    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
    .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className.substring(0, d.r/3); }); 
}); 

이것은 거품 형 차트 예제에서 "flare.json"을 열고 그걸로 작업을 시작합니다. 같은 파일에서 두 가지 작업을 모두 수행하는 것을 막을 수있는 방법은 없습니다.

당신이 알아야 할 것은 다른 프로그램과 마찬가지로 변수 참조입니다. 각 SVG는 자체 참조가 필요합니다. 위의 두 코드 블록은 여러 변수에 대해 동일한 변수 이름을 사용하므로 서로 밟을 수 있습니다. 두 페이지를 한 페이지에 넣으려면 변수의 이름을 고유하게 바꾸기 만하면됩니다. 누군가가 어쩌면 IE9 원인은 크롬과 파이어 폭스이 테스트 같은이를 개선하기 위해 포인터를 가지고있는 경우

Answer 2

d3.xml("./svgs.xml", "application/xml", function(xml, error) { 

    var data = xml.documentElement, 
     sections = data.getElementsByTagName("section"), 
     svgWrapper = "center"; 


    for (var i = 0, lenS = sections.length; i < lenS; i++) {  

     var name = sections[i].getElementsByTagName("name")[0].childNodes[0].nodeValue, 
      images = sections[i].getElementsByTagName("image"); 

     for (var j = 0, lenI = images.length; j < lenI ; j++) { 

      //<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
      var image = images[j].firstElementChild; 

      //assuming I only target 1 unique HTML5-element 
      if (document.getElementsByTagName(name)[0] !== undefined) { 

       //in search of wrapper-class and append data to it 
       document.getElementsByTagName(name)[0].getElementsByClassName(svgWrapper)[0].appendChild(image); 

      // If node "name" is not a element then it's an id 
      } else if (document.getElementById(name) !== undefined) { 

       document.getElementById(name).getElementsByClassName(svgWrapper)[0].appendChild(image); 
      } else { 

       console.alert("what the hell went wrong while inserting svgs?!"); 
       alert("What the hell went wrong while inserting svgs?!"); 
      } 

     } 
    } 
}); 

(윈도우 VM을 설치해야합니다). XHR에서 오류 매개 변수를 catch하고 처리하는 방법은 무엇입니까?