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这可能是; < / p>

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

d3图表刷新重复

1 个答案: