Question

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

这些饼图是通过javascript from：

创建的

https://bl.ocks.org/mbostock/3887235

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

中

function 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>piechart2()</script>
        </div>
</div>

这可以显示饼图2

    <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>
          <script>piechart2()</script>
        </div>
</div>

但是，这只显示piechar1。查看开发人员工具时，可以看到piechar2应该是空白的空间。

<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 ; });

});


}

这是javascript。两个js文件之间的唯一区别是，一个有piechart（）/ piechart2（）和＆＃34;静态/数据＆＃34; /＆＃34;静态/数据2＆＃34;

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

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

curl 127.0.0.1:8080/api

思考？提前谢谢！

Answer 1

这里的问题是你的js个文件都试图将饼图附加到html文档中的同一个svg元素区域。所以基本上你有2个函数试图在同一区域绘制2个不同的饼图。

避免这种情况的一种方法是拥有2个svg元素并为其提供ids。这样您就可以根据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>

然后，当您必须选择绘制图表的区域时，您可以在第一个文件中选择d3.select("#svg1")，在第二个文件中选择d3.select("#svg2")。

无法在html中显示两个D3饼图中的第二个

1 个答案: