Javascript d3.js:SVG条显示在SVG区域之外

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

我唯一的问题是，为什么这些条会显示在svg区域之外，远至页面底部

---

谢谢你的帮助

我认为您需要选择现有的svg元素，而不是添加新的svg元素

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

查看白色背景上所有条形图的完整代码。

---

我认为您需要选择现有的svg元素，而不是添加新的svg元素

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

查看白色背景上所有条形图的完整代码。

---

这是有道理的，但不幸的是，这不起作用。这些条现在完全消失。请参见上面的更新。所有的条形图现在应该显示在“第二…”和“第三…”之间。您的小提琴示例显示了它的工作原理，但在我的图表中，svg元素现在位于正确的位置（您关于选择vs追加的说法是正确的），但我仍然没有看到条形图。我甚至完全按照你在一个独立的htm页面上显示的方式复制了代码，但是没有显示任何条。你有控制台错误吗？你能发布你页面的完整html吗？还是一样？现在我没事了。您的fiddle代码没有对脚本文件的引用，因此我将其包括在内，您的示例现在可以运行了。非常感谢你的帮助。我对你的答案投了更高的票。这是有道理的，但不幸的是，这不起作用。这些条现在完全消失。请参见上面的更新。所有的条形图现在应该显示在“第二…”和“第三…”之间。您的小提琴示例显示了它的工作原理，但在我的图表中，svg元素现在位于正确的位置（您关于选择vs追加的说法是正确的），但我仍然没有看到条形图。我甚至完全按照你在一个独立的htm页面上显示的方式复制了代码，但是没有显示任何条。你有控制台错误吗？你能发布你页面的完整html吗？还是一样？现在我没事了。您的fiddle代码没有对脚本文件的引用，因此我将其包括在内，您的示例现在可以运行了。非常感谢你的帮助。我对你的答案投了赞成票。

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