javascript - d3图表刷新重复

Question

我正在使用 d3.js 库，但我在线性图形方面遇到了很多问题。看起来每次页面刷新时，图形都会被复制，经过一段时间的运行后，我得到了很多重复的图形。我还使用静态数据(我输入了一些随机数据以使图形正常工作)。有人能帮我吗？为什么会发生这种情况？有什么解决办法吗？

chart3-controller.js

module.exports = function Chart3Ctrl($scope) {

  d3 = require('d3')

  $scope.chart = function() {

    var arrData = [
      ["2012-10-02", 200],
      ["2012-10-09", 300],
      ["2012-10-12", 150]
    ];

    var margin = {
        top: 20,
        right: 20,
        bottom: 30,
        left: 50
      },
      width = 960 - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

    var parseDate = d3.time.format("%Y-%m-%d").parse;

    var x = d3.time.scale()
      .range([0, width])

    var y = d3.scale.linear()
      .range([height, 0]);

    var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom");

    var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left");

    var line = d3.svg.line()
      .x(function(d) {
        return x(d.date);
      })
      .y(function(d) {
        return y(d.close);
      });

    var svg = d3.select("#chart3").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top +
        ")");

    var data = arrData.map(function(d) {
      return {
        date: parseDate(d[0]),
        close: d[1]
      };

    });

    console.log(data); 

    x.domain(d3.extent(data, function(d) {
      return d.date;
    }));
    y.domain(d3.extent(data, function(d) {
      return d.close;
    }));

    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

    svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

    svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);
  }
}

chart3.pug

.widget-container.fluid-height.stf-cpu(ng-controller='Chart3Ctrl')
  .heading
    i.fa
    span(translate) Chart 3

  .widget-content.padded
    div#chart3(style='width:100%; height:100%;')
      {{ chart() }}

欢迎任何帮助! :)谢谢

Answer 1

您是否尝试过删除函数顶部的图表？

所以；

d3.selectAll('#chart3 svg').remove();

这会在重新绘制之前删除图表的任何实例，更好的方法可能是包含在 if 语句中以首先检查 svg 是否存在，然后在不存在的情况下绘制它，使用 jquery 这可能是;

if(!$('#chart3 svg').length > 0) {
    run code here...
}