d3.js: SVG бары появляются за пределами области SVG

Question

Я новичок в d3.js и строю простую гистограмму.Код, показанный ниже, показывает полосы в самом низу окна браузера, а не в пределах области svg в HTML-коде.

Вот HTML-код:

<div class="C2_01">First paragraph.</div><br>

<div class="C2_02">Second paragraph.</div><br>

<svg></svg>
<script src="JS\D3_BarChart.js"></script>

<div class="C2_04">Third paragraph.</div>

Вот код JavaScript d3:

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

var svg = d3.select("body").append("svg")
          .attr("height","20%")
          .attr("width","20%");

svg.selectAll("rect")
    .data(dataArray)
    .enter().append("rect")
          .attr("height","250")
          .attr("width","30")
          .attr("x", function(d, i) {return (i * 60) + 25})
          .attr("y","50")
          .attr("fill","white");

Мой единственный вопрос: почему столбцы отображаются за пределами области svg,далеко до нижней части страницы?

Спасибо за любую помощь.

Answer 1

Я считаю, что вам нужно выбрать существующий элемент svg вместо добавления нового.

var svg = d3.select("svg") // Not append
          .attr("height","20%")
          .attr("width","20%");

Полный код для просмотра всех баров на белом фоне.http://jsfiddle.net/jg83ed91/5/

var dataArray = [23, 13, 21, 14, 37, 15, 18, 34, 30];

d3.select("svg")
  .attr("height", "20%")
  .attr("width", "100%") // Full width to show all bars
  .selectAll("rect")
  .data(dataArray)
  .enter().append("rect")
  .attr("height", "250")
  .attr("width", "30")
  .attr("x", function(d, i) {
    return (i * 60) + 25
  })
  .attr("y", "50")
  .attr("fill", "black"); // On white background