D3 - Использование div для размещения элемента SVG

Я пытаюсь понять, как использовать Div для размещения элемента SVG на странице ... наш код выглядит так: (извините, что есть миллион вещей, которые могли бы вероятно, более чистый с ним ...)D3 - Использование div для размещения элемента SVG

Я пытаюсь поместить Div в тело, указав его id, а затем вставив в него элемент SVG. div - квадраты, я называю квадрат div под элементом SVG легенды, а затем легенда исчезает, и я просто получаю 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"), этот выбор возвращает ваш элемент? –

, вы можете использовать 'div # squares' в качестве селектора, так как вы используете идентификатор –

Согласно моим комментариям выше, убедитесь, что вы правильно выбрали. В настоящее время, вы настраиваете DIV с идентификатором (и без определенного класса), таким образом, вы должны выбрать его в качестве:

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

В качестве альтернативы, вы можете применить класс к DIV (не могу сказать, что лучше - зависит от того, что вы собираетесь с ним делать)

Чтобы получить представление о селекторах, см., например, здесь: http://www.w3schools.com/cssref/css_selectors.asp

источник

2014-11-20 07:57:25

D3 - Использование div для размещения элемента SVG

ответ

Смежные вопросы