javascript - how to fill the area between the bars in the given example d3js -

i trying create somehing

i thinking horizontal stacked bar chart twist. need guideline on how convert horizontal stacked bar chart

    state.each(function(d,i) {  //var line = focus.append("line").style("stroke", "black")             //.attr("x1", x11(450))             //.attr("y1", y(585))             //.attr("x2", that.options.width - 210)             //.attr("y2", that.options.height-(that.options.height - 20)).style("shape-rendering","auto");      d3.select(this).append("circle").attr("cx",this.getbbox().width).attr("cy",this.getbbox().y).attr("r",2)     d3.select(this).append("circle").attr("cx",this.getbbox().x).attr("cy",this.getbbox().y).attr("r",2)     d3.select(this).append("circle").attr("cx",(this.getbbox().x)).attr("cy",this.getbbox().height+this.getbbox().y).attr("r",2)     d3.select(this).append("circle").attr("cx",(this.getbbox().x+this.getbbox().width-4)).attr("cy",this.getbbox().height+this.getbbox().y-2).attr("r",2)     console.log(this.getbbox()) }); 

to or @ least that. first problem facing center align stacked bar chart. means if remove yaxis , make bars center align.

how center stacks.

your current implementation here.

answer rotate via center of graph 90 degrees shown below in code

var svg = d3.select("body").append("svg")     .attr("id", "mysvg")     .attr("width", width + margin.left + margin.right)     .attr("height", height + margin.top + margin.bottom)     .append("g")     .attr("transform", "translate(" + margin.left + "," + margin.top + ")rotate(90," + width / 2 + "," + height / 2 + ")"); var legend = d3.select("svg").append("g"); 

this rotate graph , this

next how show legends graph

   //this last g(group) element want attach legend     var lastg = d3.select(d3.selectall(".state")[0].pop());    //this rectangles in teh last group     var lastrect = d3.select(d3.selectall(".state")[0].pop()).selectall("rect");    //to bbox's y (since rotated 90 x become y)     var lastx = lastg.node().getbbox().y;     var linefunction = d3.svg.line()         .x(function (d) {         return d.x;     })         .y(function (d) {         return d.y;     })         .interpolate("step-before");     //to each rectangle in last group     lastrect[0].foreach(function (d, i) {          //make svg point          var point = document.getelementbyid("mysvg").createsvgpoint();         point.x = (d3.select(d).attr("x") + +parsefloat(d3.select(d).attr("width")));         point.y = (parsefloat(d3.select(d).attr("y")) + parsefloat(d3.select(d).attr("height")));         //the point after rotation moves new position.         var newpoint = point.matrixtransform(d.getscreenctm());         //making circle , appending legend group           legend.append("circle").attr("r", 2).attr("cx", newpoint.x).attr("cy", newpoint.y).style("fill", "red").attr("class", "entry");          var x1 = lastx;         var y1 = newpoint.y + 50 + (10 * i);         legend.append("circle").attr("r", 2).attr("cx", x1).attr("cy", y1).style("fill", "red").attr("class", "entry");          //making line start point , end point         var linedata = [{             x: newpoint.x,             y: newpoint.y         }, {             x: x1,             y: y1         }];         //make line , append legend         legend.append("path")             .attr("d", linefunction(linedata))             .attr("stroke", "blue")             .attr("stroke-width", 2)             .attr("fill", "none");         //adding text label         legend.append("text").attr("x", x1+20).attr("y", y1).text(d3.select(d).data()[0].name)     }); 

full working code here

i have added comments understand code.

hope helps!