在第二次呼叫时附加不起作用

问题描述 投票：1回答：1

我正在制作一个js函数，每次调用数据时都将数据绘制成一个新的div，问题是有些追加不适用于第二次调用，我需要你的帮助才能知道什么是错的。

屏幕截图显示了第一个和第二个调用结果Screenshot之间的差异

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <style>
    .axis {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
  </style>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
    var data = [];
    data.push({
      date: " 2019-03-25 00:00:00 ",
      value: 509
    });
    data.push({
      date: " 2019-03-26 00:00:00 ",
      value: 505
    });
    data.push({
      date: " 2019-03-27 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-03-28 00:00:00 ",
      value: 517
    });
    data.push({
      date: " 2019-03-29 00:00:00 ",
      value: 376
    });
    data.push({
      date: " 2019-03-30 00:00:00 ",
      value: 474
    });
    data.push({
      date: " 2019-03-31 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-04-01 00:00:00 ",
      value: 510
    });
    data.push({
      date: " 2019-04-02 00:00:00 ",
      value: 507
    });
    data.push({
      date: " 2019-04-03 00:00:00 ",
      value: 516
    });
    data.push({
      date: " 2019-04-04 00:00:00 ",
      value: 529
    });
    data.push({
      date: " 2019-04-05 00:00:00 ",
      value: 380
    });
    data.push({
      date: " 2019-04-06 00:00:00 ",
      value: 455
    });
    data.push({
      date: " 2019-04-07 00:00:00 ",
      value: 513
    });

    function plot(arg) {
      var ddd = arg;
      var margin = {
        top: 20,
        right: 20,
        bottom: 70,
        left: 40
      };
      var width = 600 - margin.left - margin.right;
      var height = 300 - margin.top - margin.bottom;
      // Parse the date / time
      var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
      var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
      var y = d3.scale.linear().range([height, 0]);
      var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m"));
      var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);
      var div = d3.select("body").append("div");
      var svg = div.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      ddd.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
      });
      x.domain(ddd.map(function(d) {
        return d.date;
      }));
      y.domain([0, d3.max(ddd, function(d) {
        return d.value;
      })]);
      g.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)");
      g.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("y", -13).attr("dy", ".71em").style("text-anchor", "end").text("Count");
      g.selectAll("bar").data(ddd).enter().append("rect").style("fill", "steelblue").attr("x", function(d) {
        return x(d.date);
      }).attr("width", x.rangeBand()).attr("y", function(d) {
        return y(d.value);
      }).attr("height", function(d) {
        return height - y(d.value);
      });;
    }

    plot(data);
    plot(data);
  </script>
</body>
javascript d3.js
1个回答
0
投票

你的函数plot()有一个side effect - 它改变输入数据数组。

如果你传递副本那里一切都会好的：

    plot(data.map(a => Object.assign({}, a)));
    plot(data.map(a => Object.assign({}, a)));


<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <style>
    .axis {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
  </style>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
    var data = [];
    data.push({
      date: " 2019-03-25 00:00:00 ",
      value: 509
    });
    data.push({
      date: " 2019-03-26 00:00:00 ",
      value: 505
    });
    data.push({
      date: " 2019-03-27 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-03-28 00:00:00 ",
      value: 517
    });
    data.push({
      date: " 2019-03-29 00:00:00 ",
      value: 376
    });
    data.push({
      date: " 2019-03-30 00:00:00 ",
      value: 474
    });
    data.push({
      date: " 2019-03-31 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-04-01 00:00:00 ",
      value: 510
    });
    data.push({
      date: " 2019-04-02 00:00:00 ",
      value: 507
    });
    data.push({
      date: " 2019-04-03 00:00:00 ",
      value: 516
    });
    data.push({
      date: " 2019-04-04 00:00:00 ",
      value: 529
    });
    data.push({
      date: " 2019-04-05 00:00:00 ",
      value: 380
    });
    data.push({
      date: " 2019-04-06 00:00:00 ",
      value: 455
    });
    data.push({
      date: " 2019-04-07 00:00:00 ",
      value: 513
    });

    function plot(arg) {
      var ddd = arg;
      var margin = {
        top: 20,
        right: 20,
        bottom: 70,
        left: 40
      };
      var width = 600 - margin.left - margin.right;
      var height = 300 - margin.top - margin.bottom;
      // Parse the date / time
      var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
      var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
      var y = d3.scale.linear().range([height, 0]);
      var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m"));
      var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);
      var div = d3.select("body").append("div");
      var svg = div.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      ddd.forEach(function(d) {
        d.date = parseDate(d.date);
        d.value = +d.value;
      });
      x.domain(ddd.map(function(d) {
        return d.date;
      }));
      y.domain([0, d3.max(ddd, function(d) {
        return d.value;
      })]);
      g.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)");
      g.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("y", -13).attr("dy", ".71em").style("text-anchor", "end").text("Count");
      g.selectAll("bar").data(ddd).enter().append("rect").style("fill", "steelblue").attr("x", function(d) {
        return x(d.date);
      }).attr("width", x.rangeBand()).attr("y", function(d) {
        return y(d.value);
      }).attr("height", function(d) {
        return height - y(d.value);
      });;
    }
    
    plot(data.map(a => Object.assign({}, a)));
    plot(data.map(a => Object.assign({}, a)));
  </script>
</body>

enter image description here

UPD：再次检查你的代码后，我发现你可以简单地提取这段代码：

var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
data.forEach(function(d) {
  d.date = parseDate(d.date);
  d.value = +d.value;
});

来自plot函数并在调用plot函数之前放置它，这是工作解决方案：

<!DOCTYPE html>
<meta charset="utf-8">

<head>
  <style>
    .axis {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
  </style>
</head>

<body>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <script>
    var data = [];
    data.push({
      date: " 2019-03-25 00:00:00 ",
      value: 509
    });
    data.push({
      date: " 2019-03-26 00:00:00 ",
      value: 505
    });
    data.push({
      date: " 2019-03-27 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-03-28 00:00:00 ",
      value: 517
    });
    data.push({
      date: " 2019-03-29 00:00:00 ",
      value: 376
    });
    data.push({
      date: " 2019-03-30 00:00:00 ",
      value: 474
    });
    data.push({
      date: " 2019-03-31 00:00:00 ",
      value: 504
    });
    data.push({
      date: " 2019-04-01 00:00:00 ",
      value: 510
    });
    data.push({
      date: " 2019-04-02 00:00:00 ",
      value: 507
    });
    data.push({
      date: " 2019-04-03 00:00:00 ",
      value: 516
    });
    data.push({
      date: " 2019-04-04 00:00:00 ",
      value: 529
    });
    data.push({
      date: " 2019-04-05 00:00:00 ",
      value: 380
    });
    data.push({
      date: " 2019-04-06 00:00:00 ",
      value: 455
    });
    data.push({
      date: " 2019-04-07 00:00:00 ",
      value: 513
    });

    function plot(arg) {
      var ddd = arg;
      var margin = {
        top: 20,
        right: 20,
        bottom: 70,
        left: 40
      };
      var width = 600 - margin.left - margin.right;
      var height = 300 - margin.top - margin.bottom;


      var x = d3.scale.ordinal().rangeRoundBands([0, width], .05);
      var y = d3.scale.linear().range([height, 0]);
      var xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(d3.time.format("%d/%m"));
      var yAxis = d3.svg.axis().scale(y).orient("left").ticks(7);
      var div = d3.select("body").append("div");
      var svg = div.append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom);
      var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      x.domain(ddd.map(function(d) {
        return d.date;
      }));
      y.domain([0, d3.max(ddd, function(d) {
        return d.value;
      })]);
      g.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")").call(xAxis).selectAll("text").style("text-anchor", "end").attr("dx", "-.8em").attr("dy", "-.55em").attr("transform", "rotate(-90)");
      g.append("g").attr("class", "y axis").call(yAxis).append("text").attr("transform", "rotate(0)").attr("y", -13).attr("dy", ".71em").style("text-anchor", "end").text("Count");
      g.selectAll("bar").data(ddd).enter().append("rect").style("fill", "steelblue").attr("x", function(d) {
        return x(d.date);
      }).attr("width", x.rangeBand()).attr("y", function(d) {
        return y(d.value);
      }).attr("height", function(d) {
        return height - y(d.value);
      });;
    }
    
    var parseDate = d3.time.format(" %Y-%m-%d %H:%M:%S ").parse;
    data.forEach(function(d) {
      d.date = parseDate(d.date);
      d.value = +d.value;
    });
    
    plot(data);
    plot(data);
    
  </script>
</body>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.