Javascript Can'；t在html中显示两个D3图表中的第二个

我有一个html页面，我想显示两个图形，每个图形都是通过d3创建的。我可以单独显示每个饼图，但是，当我尝试同时显示这两个饼图时，第二个饼图是空白的。第一个很好

这些饼图是通过javascript从以下位置创建的：

主要区别在于，我将javascript放在一个文件中，并将其嵌套在函数周围

函数piechart2（）{…}

我可以单独显示每个饼图，但似乎无法同时显示两个饼图

此操作用于显示饼图1：

    <div class="row">
     <h3 align="center" >Connect</h3>
      <div class="row placeholders">
        <div class="col-md-offset-2">
          <svg width="300" height="200"></svg>
          <script>piechart()</script>
        </div>
</div>

我通过调用javascript函数将饼图添加到脚本中：

<script>piechart()</script>
<script>piechart2()</script>

piechart（）
piechart2（）

想法？

---

提前谢谢

这里的问题是，您的

js

文件都试图将饼图附加到html文档中相同的

svg

元素区域。因此，基本上有两个函数试图在同一区域中绘制两个不同的饼图

避免这种情况的一种方法是使用2个

svg

元素并给它们

id

。通过这种方式，您可以根据id选择DOM。因此，您可以尝试以下方法：

<div class="row">
     <h3 align="center" >Connect</h3>
      <div class="row placeholders">
        <div class="col-md-offset-2">
          <svg width="300" height="200" id="svg1"></svg>
          <svg width="300" height="200" id="svg2"></svg>
          <script>piechart()</script>
          <script>piechart2()</script>
        </div>
</div>

连接
皮查特（）
piechart2（）

---

然后，当您必须选择绘制图形的区域时，您可以在第一个文件中选择

d3。选择（“#svg1”）

，在第二个文件中选择

d3。选择（“#svg2”）

嗯。。。我已经做了你建议的更改，但看起来我得到了相同的结果。我看到一个饼图，当我转到设计器工具时，我看到第二个svg（svg#svg2），但没有图形。

<script type="text/javascript" src="static/donut.js"></script>
<script type="text/javascript" src="static/donut2.js"></script>

function piechart() {
var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height"),
    radius = Math.min(width, height) / 2,
    g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var color = d3.scaleOrdinal(["#0600f3","#f30000","#00b109"]);

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

var path = d3.arc()
    .outerRadius(radius - 10)
    .innerRadius(0);

var label = d3.arc()
    .outerRadius(radius - 40)
    .innerRadius(radius - 40);

d3.csv("static/data.csv?x="+new Date().getTime(), function(d) {
  d.population = +d.population;
  return d;
}, function(error, data) {
  if (error) throw error;

  var arc = g.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
      .attr("class", "arc");

  arc.append("path")
      .attr("d", path)
      .attr("fill", function(d) { return color(d.data.population); });

  arc.append("text")
      .attr("transform", function(d) { return "translate(" + label.centroid(d) + ")"; })
      .attr("dy", ".35em")
      .text(function(d) { return d.data.population ; });

});


}

<script>piechart()</script>
<script>piechart2()</script>

<div class="row">
     <h3 align="center" >Connect</h3>
      <div class="row placeholders">
        <div class="col-md-offset-2">
          <svg width="300" height="200" id="svg1"></svg>
          <svg width="300" height="200" id="svg2"></svg>
          <script>piechart()</script>
          <script>piechart2()</script>
        </div>
</div>