javascript - d3.js:SVG 条出现在 svg 区域之外

Question

我是 d3.js 新手，正在构建一个简单的条形图。下面显示的代码在浏览器窗口的最底部显示栏，而不是在 html 代码中的 svg 区域内。

这是 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>

这是 d3 JavaScript 代码:

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