D3 - div를 사용하여 SVG 요소 배치하기

Div를 사용하여 페이지에서 SVG 요소를 배치하는 방법을 이해하려고합니다. 우리 코드는 다음과 같이 보입니다. 아마 그것으로 더 깨끗하게 ...)D3 - div를 사용하여 SVG 요소 배치하기

나는 Div를 몸에 넣고, ID를주고, 그 안에 내 SVG 요소를 넣으려고한다. div는 사각형이고, 전설의 SVG 요소 아래 사각형 div를 호출하면 범례가 사라지고 div를 얻습니다 .... 무엇을 제공합니까?

<!DOCTYPE html> 
<meta charset="utf-8"> 
<style type="text/css"> 
body { 
    font: 12px sans-serif;} 

svg { 
    padding: 20px 0 0 10px;} 

.arc { 
    stroke: #fffff; } 

    a:link { 
    color:#58B341; 
    background-color:transparent; 
    text-decoration:none; 
} 
a:visited { 
    color:#000000; 
    background-color:transparent; 
    text-decoration:none; 
} 
a:hover { 
    color:#1AA079; 
    background-color:transparent; 
    text-decoration:underline; 
} 
a:active { 
    color:#ff0000; 
    background-color:transparent; 
    text-decoration:underline; 
} 

</style> 

    <body> 
    **<div id="squares">** 
    </div> 
    <script src="http://d3js.org/d3.v3.min.js"></script> 
    <script> 

     var radius = 230, 
      padding = 10; 

     var color = d3.scale.ordinal() 
      .range(["#FFF587", "#FFF9B3", "#E0ECBD", "#C4E0A3", "#C3DD97", "#B9D87A", "#A1CE60", "#7DC050", "#58B341", "#38AC3D", "#26A74E", "#1FA465", "#1AA079", "#1A9A8D", "#199A8B", "#1D859D", "#1264AC", "#15559E", "#173572", "#1E194F"]); 

     //WIDTH OF CIRCLE STROKE 
     var arc = d3.svg.arc() 
      .outerRadius(radius) 
      .innerRadius(radius - 100); 

     var pie = d3.layout.pie() 
      .sort(null) 
      .value(function(d) { return d.population; }); 

     d3.csv("data1992.csv", function(error, data) { 
      color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; })); 

      data.forEach(function(d) { 
      d.ages = color.domain().map(function(name) { 
       return {name: name, population: +d[name]}; 
      }); 
      }); 
//position of legend 
      **var legend = d3.select("div.squares").append("svg")** 
       .attr("class", "legend") 
       .attr("width",radius * 2) 
       .attr("height", radius * 2) 
      .selectAll("g") 
       .data(color.domain().slice().reverse()) 
      .enter().append("g") 
       .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); 

     //CONTROLS WIDTH OF SQUARE IN LEGEND 
      legend.append("rect") 
       .attr("width", 18) 
       .attr("height", 18) 
       .style("fill", color); 

     //CONTROLS PLACEMENT OF LIST NEXT TO SQUARES 
      legend.append("text") 
       .attr("x", 24) 
       .attr("y", 9) 
       .attr("dy", ".35em") 
       .text(function(d) { return d; }); 

     //HEIGHT OF PLACEMENT OF CIRCLE 
      var svg = d3.select("body").selectAll(".pie") 
       .data(data) 
      .enter().append("svg") 
       .attr("class", "pie") 
       .attr("width", radius * 2) 
       .attr("height", radius * 2) 
      .append("g") 
       .attr("transform", "translate(" + radius + "," + radius + ")"); 

      svg.selectAll(".arc") 
       .data(function(d) { return pie(d.ages); }) 
      .enter().append("path") 
       .attr("class", "arc") 
       .attr("d", arc) 
       .style("fill", function(d) { return color(d.data.name); }); 

      svg.append("text") 
       .attr("dy", ".35em") 
       .style("text-anchor", "middle") 
       .text(function(d) { return d.State; }); 

     }); 

    </script> 
    </body>

출처

2014-11-19 Ashley Esselink

d3.select ("div.squares")를 사용하면이 선택 항목이 귀하의 요소를 반환합니까? –

id를 사용할 때 selector로'div # squares'를 사용할 수 있습니다. –

위의 의견에 따르면 올바르게 선택했는지 확인하십시오. 현재, 따라서 당신이로 선택해야 아이디 (없이 특정 클래스)와 사업부를 설정 : 또는

var legend = d3.select("div#squares")...

, 당신은 DIV에 클래스를 적용 할 수있는 (무엇을 더 말할 수 없습니다 - 당신이 무엇을 할 계획인지에 달려있다)

선택자에 대한 아이디어를 얻으려면, 예를 들어 여기에 : http://www.w3schools.com/cssref/css_selectors.asp

출처

2014-11-20 07:57:25

D3 - div를 사용하여 SVG 요소 배치하기

답변

관련 문제