Блог

Пытаюсь изменить отзывчивую столбчатую диаграмму с вертикальной на горизонтальную, но в svg ничего не отображается, кроме оси.

Я упомянул некоторые из подобных проблем в stack overflow, например, после изменений, следуя некоторым другим примерам из потока стекирования, подобным этому и этому.

Код для моей столбчатой диаграммы с вертикальным расположением в fiddle

Но текущий рабочий код находится здесь

      margin = {
        top: 20,
        right: 160,
        bottom: 35,
        left: 30
      };

      var width = 600 - margin.left - margin.right,
        height = 600 - margin.top - margin.bottom;

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


      /* Data in strings like it would be if imported from a csv */

      var data = [{
          year: "A",
          redDelicious: "10",
          mcintosh: "5",
          oranges: "19"
        }, {
          year: "B",
          redDelicious: "12",
          mcintosh: "0",
          oranges: "15"
        }, {
          year: "C",
          redDelicious: "05",
          mcintosh: "0",
          oranges: "28"
        }, {
          year: "D",
          redDelicious: "14",
          mcintosh: "0",
          oranges: "12"
        },

      ];
      $("#btn").on("click", function(){
        d3.selectAll("svg > g > g").remove();
        data[1].mcintosh = (Number(data[1].mcintosh)   1).toString();
        console.log(1,data);
        update();
      });
      update();
function update(){
      var orangeData = data.map(function(d) {
        return {
          year: d.year,
          oranges:  d.oranges
        }
      });
      console.log(orangeData)



      // Transpose the data into layers
      var dataset = d3.layout.stack()(["redDelicious", "mcintosh"].map(function(skillset) {
        return data.map(function(d) {
          return {
            y: d.year,
            x:  d[skillset]
          };
        });
      }));
      console.log(dataset)

   xMax = d3.max(dataset, function(group) {
            return d3.max(group, function(d) {
                return d.x   d.x0;
            });
        }),
        xScale = d3.scale.linear()
            .domain([0, xMax])
            .range([0, width]);
        months = dataset[0].map(function(d) { return d.y; });    

         yScale = d3.scale.ordinal()
            .domain(months)
            .rangeRoundBands([0, height], .1);

      // Set x, y and colors
    /*  var y = d3.scale.ordinal()
         .domain([0, d3.max(dataset, function(d) {
          return d3.max(d, function(d) {
          return d.y;
          });
        })])
        .rangeRoundBands([height, 0], 0.02);

      var x = d3.scale.linear()
          .domain(dataset[0].map(function(d) {

          return d.x0   d.x;
        }))
        .range([10, width-10]); */

      var colors = ["#b33040", "#d9d574"];
       var backcolors = ["red", "blue","green","pink"];


      // Define and draw axes
      var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left");

      var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("bottom").ticks(5)
        .tickSize(-width, 0, 0);
     /*   .tickFormat(function(d) {
          return 0
        });*/
      //  .tickFormat(d3.time.format("%Y"));

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

      svg.append("g")
        .attr("class", "y axis")
        .call(yAxis).attr("transform", "rotate(-0)")
        .attr("y", 6)
        .attr("dy", ".71em")
        .style("text-anchor", "end");


        // Creating the Average Bar for the Semester
        svg.selectAll(".bar1").data(orangeData).enter().append("g")
        .attr("class", "bar1").append("rect")
        .attr("y", function(d) {
          return y(d.year) ; // center it
        })
        .attr("width", x.rangeBand()) // make it slimmer
        .attr("x", function(d) {
          return x(d.oranges);
        })
        .attr("width", function(d) {
          return width - x(d.oranges);
        });



      // Create groups for each series, rects for each segment in Stacked Bar 
      var groups = svg.selectAll("g.cost")
        .data(dataset)
        .enter().append("g")
        .attr("class", "cost")
        .style("fill", function(d, i) {
          return colors[i];
        });

      var rect = groups.selectAll("rect")
        .data(function(d) {
          return d;
        })
        .enter()
        .append("rect")
        .attr("y", function(d,y) {
          return yScale(d.y)    20 ;
        })
        .attr("x", function(d) {
          return xScale(d.x0 );
        })
        .attr("width", function(d) {
          return xScale(d.x);
        })
        .attr("height", yScale.rangeBand() -40 );
        }