Question

我尝试使用新数据更新堆栈条形图。我可以用v4进行更新，但出于好奇心想要制作它的v3。正确读取数据，它不会重绘。我在here，here和here中尝试了几种不同的选项。如果有人能想出解决方案，我将非常感激。感谢

   var causes = ["eu", "nonEu"];

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

   var x = d3.scale.ordinal()
       .rangeRoundBands([0, width]);

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

   var z = d3.scale.category10();

   var xAxis = d3.svg.axis()
       .scale(x)
       .orient("bottom");
       // .tickFormat(d3.time.format("%b"));

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

   var svg = d3.select("#stacked").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 + ")");

   d3.csv("data.csv", type, function(error, data) {
     if (error) throw error

     console.log(data)

     var select = d3.select("#menu")

     select.selectAll("option")
          .data(data)
          .enter()
          .append("option")
          .attr("value", function(d) {
            // console.log(d)
              return d.group;
          })
          .attr("id", function(d) {
              return d.group;
          })
          .text(function(d) {
              return d.group;
          });

      select
        .on("change", function(d) {
            value = d3.select(this).property("value");
            console.log(value);
            var graphic_data = data.filter(function(d) {
              return d.group == value;
            })
            console.log(graphic_data)
            draw(graphic_data);
        });
    function draw(graphic_data) {
      var layers = d3.layout.stack()(causes.map(function(c) {
        return graphic_data.map(function(d) {
          return {x: d.group, y: d[c]};
        });
      }));
      console.log(layers);


      x.domain(layers[0].map(function(d) { return d.x; }));
      y.domain([0, d3.max(layers[layers.length - 1], function(d) { return d.y0 + d.y; })]).nice();

      var layer = svg.selectAll(".layer")
          .data(layers);

      layer.enter().append("g")
          .attr("class", "layer")
          .style("fill", function(d, i) { return z(i); });

      var newLayer = layer.selectAll("rect")
          .data(function(d) { return d; });

      newLayer.enter().append("rect")
          .attr("x", function(d) { return x(d.x); })
          .attr("y", function(d) { return y(d.y + d.y0); })
          .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
          .attr("width", x.rangeBand() - 1);

      newLayer.exit().remove();

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

      svg.append("g")
          .attr("class", "axis axis--y")
          .attr("transform", "translate(" + width + ",0)")
          .call(yAxis);

    }
   });

   function type(d) {
     console.log(d)
     // d.date = parseDate(d.date);
       console.log();
       var eu = +d.eu*100/(+d.eu + +d.nonEu);
       var nonEu = +d.nonEu*100/(+d.eu + +d.nonEu);

       d.eu = eu;
       d.nonEu = nonEu;

     return d;
   }

数据

group,eu,nonEu
fuel,40,60
cars,446,50
medicine,567,435

Answer 1

好的，我修好了。创建绘制初始条的绘图函数。点击后执行更新功能。重要的是，在更新功能中，您不能再次输入和追加元素。傻我......

function update(commodity) {

  var graphic_data = data.filter(function(d) {
    return d.group == commodity;
  })


  var layers = d3.layout.stack()(causes.map(function(c) {
    return graphic_data.map(function(d) {
      return {x: d.group, y: d[c]};
    });
  }));
  console.log(layers);


  x.domain(layers[0].map(function(d) { return d.x; }));
  y.domain([0, d3.max(layers[layers.length - 1], function(d) {console.log(d); return d.y0 + d.y; })]).nice();

  var layer = svg.selectAll(".layer")
      .data(layers);

  // layer.enter().append("g")
  //     .attr("class", "layer")
  //     .style("fill", function(d, i) { return z(i); });

  var newLayer = layer.selectAll("rect")
      .data(function(d) { console.log(d);return d; });

  newLayer.exit().remove();

  newLayer
      .transition()
      .duration(1000)
      .attr("x", function(d) { return x(d.x); })
      .attr("y", function(d) { console.log(d.y);return y(d.y + d.y0); })
      .attr("height", function(d) { return y(d.y0) - y(d.y + d.y0); })
      .attr("width", x.rangeBand() - 1);

  svg.selectAll(".axis.axis--x")
      .call(xAxis);

  svg.selectAll(".axis.axis--y")
      .call(yAxis);


}

更新堆栈条形图d3 v3

1 个答案: