Question

我已将D3脚本添加到由angularjs开发的我的Web应用程序中。绘制D3图形，但每次访问选项卡时都会出现多个图形。

以下是我使用的脚本。

<script type="text/javascript">

        data = [{"value":200},
            {"value":100}];

        var w = 300,
        h = 300,
        r = 100,
        color = d3.scale.category20c();

        /*var canvas = d3.select("body").append("svg:svg").data([data])
                .attr("width", w)
                .attr("height", h)
              .append("svg:g")
                .attr("transform", "translate(" + r + "," + r + ")")*/

      var canvas = d3.select("body svg:svg");
        if(!svg){
    canvas = d3.select("body")
          .append("svg:svg").data([data])
                    .attr("width", w)
                    .attr("height", h)
                  .append("svg:g")
                    .attr("transform", "translate(" + r + "," + r + ")")
        }

        var arc = d3.svg.arc()
            .outerRadius(r);

        var pie = d3.layout.pie()
            .value(function(d) { return d.value; });

        var arcs = canvas.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("svg:g")
            .attr("class", "slice");

        arcs.append("svg:path")
            .attr("fill", function(d, i) { return color(i); } )
            .attr("d", arc);

        arcs.append("svg:text")
            .attr("transform", function(d) {
            d.innerRadius = 0;
            d.outerRadius = r;
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("text-anchor", "middle")
        .text(function(d, i) { return data[i].value; });

    </script>

我将此脚本添加到我想要显示图表的视图中。但在访问特定选项卡后，图表将显示在我的应用程序的每个选项卡中。

如上图所示，每次访问选项卡/视图时都会生成grpagh。

任何人都可以帮助我。

由于

Answer 1

为什么不想在图表中使用带ID的唯一元素？

var canvas = d3.select("body svg:svg");
    if(!svg){
canvas = d3.select("body")

尝试将其更改为

var canvas = d3.select("#yourId svg:svg");
    if(!svg){
canvas = d3.select("#yourId")

同时将<div id='yourId'></div>标记添加到选项卡，其中图表应为

Answer 2

尝试在渲染另一个svg之前删除svg

d3.select("svg").remove();

D3图表生成每次访问选项卡

2 个答案: