堆积条形图到分组条形图转换不起作用

Question

我有一个堆积条形图到分组条形图功能，过渡可以在一个图表中正常工作，但只要我添加一个它就会中断。第一个图表不会转换，第二个图表工作正常。我认为这与函数中的转换有关，因此它仅针对最后一个图表运行。

对此的任何帮助都会很棒！？

我为这个here

组成了一个jsFiddle

我的功能如下：

function createChartDate(inputdata, chartname, inputtop, inputbottom, inputwidth, inputheight, inputleft, inputright, bargap, yaxisShift) {

      var stack = d3.layout.stack(),
        layers = inputdata,
        m = layers[0].length, // number of samples per layer
        n = layers.length, // number of layers
        data = stack(d3.range(n).map(function(d) {
          return layers[d];
        }));


      var yGroupMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y;
          });
        }),


        yStackMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y0 + d.y;
          });
        });

      var margin = {
          top: inputtop,
          right: inputright,
          bottom: inputbottom,
          left: inputleft
        },
        width = inputwidth - margin.left - margin.right,
        height = inputheight - margin.top - margin.bottom;

      var x = d3.scale.ordinal()
        .domain(d3.range(m))
        .rangeRoundBands([0, width], (Number(bargap)/100));

      var xTime = d3.time.scale()
        .domain([new Date(inputdata[0][0].x), d3.time.day.offset(new Date(inputdata[0][inputdata[0].length - 1].x), 1)])
        .rangeRound([0, width - margin.left - margin.right]);


      var xAxisTime = d3.svg.axis()
        .scale(xTime)
        .orient('bottom')
        .ticks(d3.time.day, 1)
        .tickFormat(d3.time.format('%x'))
        .tickSize(0)
        .tickPadding(8);

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

      var color = d3.scale.linear()
        .domain([0, n - 1])
        .range(["#aad", "#556"]);

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(2)
        .tickPadding(6)
        .outerTickSize(0);

      var svg = d3.select(chartname).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 layer = svg.selectAll(".layer")
        .data(data)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) {
          return color(i);
        });


      var rect = layer.selectAll("rect")
        .data(function(d) {
          return d;
        })
        .enter().append("rect")
        .attr("x", function(d) {
          return xTime(d.x);
        })
        .attr("y", height)
        .attr("width", x.rangeBand())
        .attr("height", 0)

      var allrect = layer.selectAll('rect')
        .style("cursor","pointer")
        .append("svg:title")
        .text(function(d){return d.y;})


      rect.transition()
        .delay(function(d, i) {
          return i * 10;
        })
        .attr("y", function(d) {
          return y(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y0 + d.y);
        });

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxisTime)
                .selectAll("text")  
            .style("text-anchor", "end")
            .attr("dx", "-.8em")
            .attr("dy", ".15em")
            .attr("transform", function(d) {
                return "rotate(-65)" 
                });



      svg.append("g")
        .attr("class", "yaxis")
        .attr("transform", "translate(" + (Number(margin.left) - yaxisShift) + ",0)")
        .call(yAxis);

      svg.select("g.yaxis").selectAll(".tick")
        .each(function(d) {
          if (d === 0) {
            this.remove();
          }
        });


        var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect")
        allchart.on('mouseover', function(d){
        d3.select(this).style("opacity","0.8")
                })
        .on('mouseout', function(d){
        d3.select(this).style("opacity","1")
        });


      d3.selectAll("input").on("change", change);


    /*  var timeout = setTimeout(function() {
        d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
        d3.select("input[value=\"0\"]").property("checked", true).each(change);
      }, 2000); */



      function change() {
        //clearTimeout(timeout);
        if (this.value === "grouped") transitionGrouped();
        if (this.value === "stacked") transitionStacked();
        //else transitionStacked();
      }



      function transitionGrouped() {

        y.domain([0, yGroupMax]);

        var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
          axistran = d3.selectAll("svg");


        allchart.transition()
          .ease("linear")
          .duration(300)
          .delay(function(d, i) {
            return i * 10;
          })
          .attr("x", function(d, i, j) {
            return xTime(d.x) + x.rangeBand() / n * j;
          })
          .attr("width", x.rangeBand() / n)
          .transition()
          .duration(200)
          .ease("linear")
          .attr("y", function(d) {
            return y(d.y);
          })
          .attr("height", function(d) {
            return height - y(d.y);
          });



        axistran.select("g.yaxis").transition()
          .duration(600)
          .call(yAxis);

        axistran.select("g.yaxis").selectAll(".tick")
          .each(function(d) {
            if (d === 0) {
              this.remove();
            }
          });
      };


      function transitionStacked() {
        y.domain([0, yStackMax]);

        var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
          axistran = d3.selectAll("svg");

        allchart.transition()
          .ease("linear")
          .duration(300)
          .delay(function(d, i) {
            return i * 10;
          })
          .attr("y", function(d) {
            return y(d.y0 + d.y);
          })
          .attr("height", function(d) {
            return y(d.y0) - y(d.y0 + d.y);
          })
          .transition()
          .duration(200)
          .ease("linear")
          .attr("x", function(d) {
            return xTime(d.x);
          })
          .attr("width", x.rangeBand());

        axistran.select("g.yaxis").transition()
          .duration(600)
          .call(yAxis);

        axistran.select("g.yaxis").selectAll(".tick")
          .each(function(d) {
            if (d === 0) {
              this.remove();
            }
          });

      };


    };

Answer 1

正如我在评论中所说：

  

因为你的createChartDate函数包装了多个变量（和   其他功能），您的图表并不相互独立。只要   var lastchart =最后一个转换   d3.select（chartname）...，chartname保存值“＃chart2”

很多方法可以解决这个问题，但是快速重构会让你的createChartDate返回转换函数（在一个对象中），这样你以后可以调用它们（并创建一个闭包）。

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>

  <style>
    body {
      font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: auto;
      position: relative;
      width: 960px;
    }
    
    text {
      font: 10px sans-serif;
    }
    
    .axis path,
    .axis line {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }
    
    form {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  </style>
</head>

<body>
  <form>
    <label>
      <input type="radio" name="mode" value="grouped" /> Grouped
    </label>
    <label>
      <input type="radio" name="mode" value="stacked" checked="" /> Stacked
    </label>
  </form>
  <chart id="chart1"></chart>
  <chart id="chart2"></chart>
  <script>
    var layers = [{
      "x": "2016-01-01",
      "y": 4,
      "z": 5
    }, {
      "x": "2016-01-02",
      "y": 5,
      "z": 6
    }, {
      "x": "2016-01-03",
      "y": 6,
      "z": 3
    }, {
      "x": "2016-01-04",
      "y": 7,
      "z": 1
    }];

    var converted = convertjson(layers, "x", ["y", "z"]);

    var trans1 = createChartDate(converted, "#chart1", 40, 60, 960, 550, 30, 30, 30, 30),
        trans2 = createChartDate(converted, "#chart2", 40, 60, 960, 550, 30, 30, 30, 30);

    function createChartDate(inputdata, chartname, inputtop, inputbottom, inputwidth, inputheight, inputleft, inputright, bargap, yaxisShift) {

      var stack = d3.layout.stack(),
        layers = inputdata,
        m = layers[0].length, // number of samples per layer
        n = layers.length, // number of layers
        data = stack(d3.range(n).map(function(d) {
          return layers[d];
        }));


      var yGroupMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y;
          });
        }),


        yStackMax = d3.max(data, function(layer) {
          return d3.max(layer, function(d) {
            return d.y0 + d.y;
          });
        });

      var margin = {
          top: inputtop,
          right: inputright,
          bottom: inputbottom,
          left: inputleft
        },
        width = inputwidth - margin.left - margin.right,
        height = inputheight - margin.top - margin.bottom;

      var x = d3.scale.ordinal()
        .domain(d3.range(m))
        .rangeRoundBands([0, width], (Number(bargap) / 100));

      var xTime = d3.time.scale()
        .domain([new Date(inputdata[0][0].x), d3.time.day.offset(new Date(inputdata[0][inputdata[0].length - 1].x), 1)])
        .rangeRound([0, width - margin.left - margin.right]);


      var xAxisTime = d3.svg.axis()
        .scale(xTime)
        .orient('bottom')
        .ticks(d3.time.day, 1)
        .tickFormat(d3.time.format('%x'))
        .tickSize(0)
        .tickPadding(8);

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

      var color = d3.scale.linear()
        .domain([0, n - 1])
        .range(["#aad", "#556"]);

      var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickSize(2)
        .tickPadding(6)
        .outerTickSize(0);

      var svg = d3.select(chartname).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 layer = svg.selectAll(".layer")
        .data(data)
        .enter().append("g")
        .attr("class", "layer")
        .style("fill", function(d, i) {
          return color(i);
        });


      var rect = layer.selectAll("rect")
        .data(function(d) {
          return d;
        })
        .enter().append("rect")
        .attr("x", function(d) {
          return xTime(d.x);
        })
        .attr("y", height)
        .attr("width", x.rangeBand())
        .attr("height", 0)

      var allrect = layer.selectAll('rect')
        .style("cursor", "pointer")
        .append("svg:title")
        .text(function(d) {
          return d.y;
        })


      rect.transition()
        .delay(function(d, i) {
          return i * 10;
        })
        .attr("y", function(d) {
          return y(d.y0 + d.y);
        })
        .attr("height", function(d) {
          return y(d.y0) - y(d.y0 + d.y);
        });

      svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxisTime)
        .selectAll("text")
        .style("text-anchor", "end")
        .attr("dx", "-.8em")
        .attr("dy", ".15em")
        .attr("transform", function(d) {
          return "rotate(-65)"
        });



      svg.append("g")
        .attr("class", "yaxis")
        .attr("transform", "translate(" + (Number(margin.left) - yaxisShift) + ",0)")
        .call(yAxis);

      svg.select("g.yaxis").selectAll(".tick")
        .each(function(d) {
          if (d === 0) {
            this.remove();
          }
        });


      var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect")
      allchart.on('mouseover', function(d) {
          d3.select(this).style("opacity", "0.8")
        })
        .on('mouseout', function(d) {
          d3.select(this).style("opacity", "1")
        });


      /*  var timeout = setTimeout(function() {
          d3.select("input[value=\"grouped\"]").property("checked", true).each(change);
          d3.select("input[value=\"0\"]").property("checked", true).each(change);
        }, 2000); */

      return {
        
        group: function transitionGrouped() {

          y.domain([0, yGroupMax]);

          var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
            axistran = d3.selectAll("svg");


          allchart.transition()
            .ease("linear")
            .duration(300)
            .delay(function(d, i) {
              return i * 10;
            })
            .attr("x", function(d, i, j) {
              return xTime(d.x) + x.rangeBand() / n * j;
            })
            .attr("width", x.rangeBand() / n)
            .transition()
            .duration(200)
            .ease("linear")
            .attr("y", function(d) {
              return y(d.y);
            })
            .attr("height", function(d) {
              return height - y(d.y);
            });



          axistran.select("g.yaxis").transition()
            .duration(600)
            .call(yAxis);

          axistran.select("g.yaxis").selectAll(".tick")
            .each(function(d) {
              if (d === 0) {
                this.remove();
              }
            });
        },
        
        stack: function transitionStacked() {
          y.domain([0, yStackMax]);

          var allchart = d3.select(chartname).selectAll(".layer").selectAll("rect"),
            axistran = d3.selectAll("svg");

          allchart.transition()
            .ease("linear")
            .duration(300)
            .delay(function(d, i) {
              return i * 10;
            })
            .attr("y", function(d) {
              return y(d.y0 + d.y);
            })
            .attr("height", function(d) {
              return y(d.y0) - y(d.y0 + d.y);
            })
            .transition()
            .duration(200)
            .ease("linear")
            .attr("x", function(d) {
              return xTime(d.x);
            })
            .attr("width", x.rangeBand());

          axistran.select("g.yaxis").transition()
            .duration(600)
            .call(yAxis);

          axistran.select("g.yaxis").selectAll(".tick")
            .each(function(d) {
              if (d === 0) {
                this.remove();
              }
            });

        }
      }
    };

    d3.selectAll("input").on("change", change);

    function change() {
      //clearTimeout(timeout);
      if (this.value === "grouped") {
        trans1.group();
        trans2.group();
      }
      if (this.value === "stacked") {
        trans1.stack();
        trans2.stack();
      }
    }

    function convertjson(data, xValue, yArray) {
      var arrayconvertedjson = [];
      var convertedjson = [];

      for (var j = 0; j < yArray.length; j++) {
        for (var i = 0; i < data.length; i++) {
          convertedjson.push({
            "x": new Date(data[i][xValue]),
            "y": data[i][yArray[j]]
          });
        };
        arrayconvertedjson.push(convertedjson)
        convertedjson = [];
      };
      return arrayconvertedjson;
    };
  </script>
</body>

</html>