Question

在我的应用程序中，我有多个复选框，其中包含产品的名称。用户可以选择一个或多个产品。当用户选择特定产品时，基于特定日期销售的产品数量绘制区域图。

如果选择了多个产品，则会绘制堆积区域图。
如果未选择任何产品，则不会显示图表，只显示一条消息，以显示至少一个产品。

代码：初始化图形时会调用此方法。

function initialiseChart(element){
  var bRect = element.getBoundingClientRect();
  var margin = {top: 0, right: 0, bottom: 20, left: 20};
  var height = 250 - margin.top - margin.bottom;
  var width = bRect.width - margin.left - margin.right;

  var localChart = d3.select(element).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 + ")");

}

当用户选择或取消选中复选框时，会调用此选项，selectedIds包含所选的所有产品ID。如果取消选择all，则selectedIds数组为空数组。

function updateChart(selectedIds,localChart,height,width){

  var z = d3.scale.category20c();
  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").ticks(12);

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

  var stack = d3.layout.stack()
      .offset("zero")
      .values(function(d) {
        return d.values;
      })
      .x(function(d,i) {  return d.date; })
      .y(function(d,i) {  return d.counts; });

  var nest = d3.nest()
      .key(function(d) { return d.pid; });

  var area = d3.svg.area()
      .interpolate("cardinal")
      .x(function(d) {
        return x(d.date);
      })
      .y0(function(d) {
        return y(d.y0);
      })
      .y1(function(d) {
        return y(d.y0 + d.y);
      });


  var data = assignDefaultValues(selectedIds); //returns the data for selectedIds

  var layers = stack(nest.entries(data));

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

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

  localChart.append("g")
      .attr("class", "y axis")
      .call(yAxis);

   localChart.selectAll(".layer")
    .data(layers)
      .exit().remove();

  localChart.selectAll(".layer")
    .data(layers)
  .enter().append("path")
    .attr("class", "layers")
    .attr("d", function(d) { return area(d.values); })
    .style("fill", function(d, i) { return z(i); });

}

问题：

每当我选中或取消选中该复选框时，selectedIds数组都会按预期显示内容，如果选中所有内容，则为空;或者选择一个或多个产品的ID。

但是轴被重新绘制，即使取消选择，第一张绘制的图形也不会消失。

我做错了什么。

在D3.js中更新嵌套区域图表

0 个答案: