javascript - d3.js - How to do data mapping and filter for Stacked Bar graph -

I d3.js. I am implementing a stacked bar graph in This is for the population of different categories (category of people) in the city over the years. Although I have achieved some results with the help of some references, I did not have the exact result.

I think I have some problems in data mapping and filter functions, and telling them

any help would be appreciated.

Here's my code: -

  & lt ;! DOCTYPE html & gt; & Lt; Meta charset = "UTF-8" & gt; & Lt; Style & gt; Body {font: 10px sans-serif; }. Axis Path, .xx {fill: none; Stroke: # 000; Shape Rendering: Crisp Edges; } .bar {fill: steelblue; }. X Axis Path {Display: None; } & Lt; / Style & gt; & Lt; Body & gt; & Lt; Script src = "http://d3js.org/d3.v3.min.js" & gt; & Lt; / Script & gt; & Lt; Script & gt; Var margin = {top: 20, right: 20, bottom: 30, on the left: 40}, width = 960 - margin. Left - margin. Right, height = 500 - margin.Top - margin.bottom, yAxMin_PA = 0, yAxMax_PA = 1500; Var x = d3.scale.ordinal () .rangeRoundBands ([0, width], .1); Var y = d3.scale.linear () .domain ([yAxMin_PA, yAxMax_PA]). Ranges ([height, 0]); Var color = d3.scale.category20 (); Var xAxis = d3.svg.axis () .scale (x) .orient ("bottom"); Var yAxis = d3.svg.axis () .scale (y) .orient ("left") .tickFormat (d3.format (".2 s")); Var svg = d3.select ("body"). Attached ("svg") .attr ("width", width + margin.left + margin.right) .attr ("height", height + margin.top + margin below). Append ("g") .attr ("conversion", "translation (" + margin. Left + "," + margin.Top + ")"); {{"Year": 2004, "Population": ["Category": 3, "Strength" ("Category": 1, "Power": 31}, {"Category": 2, "Strength": 21} ("Category": 1, "strength": 23}, {"category": 2, "power" {{"category": 1, "Power": 2 9}, {"category": 43}, {"category": 3, "power": 33}]}, {"year": 2006, "population" "," power ": 41} {"Category": 5, "strength": ("category": 1, "strength"), {"category": 3, "strength": 55}, {"category": 4, "strength": 69} {"Class": {"class": 9}, {"category": 6, "strength": 75}]}, {"year": 2007, "population": [2, "power" : 43}, {"category": 3, "power": 25}]}, {"year "," Population ": {" category ": 1," power ": 20}, {" category ": 2," strength ": 43}, {" category ": 3," power ": 55} ]}]}}; X.domain (data bar.map (function (d) {return dir;})); svg.append ("g") .attr ("class", "x axis") .attr ("transform", "translate (0," + + + + ")".) Call (xAxis); Svg.append ("g") .attr ("class", "y axis") .Col (yAxis ) .attend ("text") .attr ("transform", "rotate (-90)") .attr ("Y", 6) .attr ("dy", ".71em"). Style (" Anchor "," end "). Text ("population"); For (k = 0; k & lt; data.bars.length; k ++) {var state = svg.append ("g") .attr ("class", "g") .attr ("transform" , Function (d) {return "translation (" + x (data. Years of [years] + ", 0)";}); ("Rect"). ("Rect") //.attr("width ", x.rangeBand ()) .attr ("Rect"). ("Rect"). ("Rect") .data (data.bars [k]. Population). Class "," rect_grp "+ k) .attr (" id ", function (d, i) {return" rect "+ i;}) .attr (" width ", function () {return x.rangeBand (); }) .attr ("y", function (D, I) {/*console.log("hiii");*/ if (i! = 0) {var prevHgt = d3.select (".ct.grgr" + k + "#rect" + (i-1)). Attr ("height"); // Select previous rectangular var ylimit = d3.select height (". Rect_grp" + k + "#rect" + (i- 1) Select "etter" ("Y"); // previous rectangle console.log y ("prevHgt =>" + prevHgt); Return ((ylimit) - (preHgt)); } And {return y (d.stenth);}}) .attr ("height", function (d, i) {return (m (y (yAxMin_PA) - mathredrounds (Y. (D. breast rest)) ;}} Style ("fill", function (d, i) {console.log (i); return color (i);});   
}       
 
 
 I think that Instead of giving examples to people, it is useful to run them manually. See here:.  
 Line 157 around where it says  
  d.population.forEach (D) {color.domain (d3.keys (d). Filter (name (function (name) {name of return}}   
  name  always  "category"  or  "power " This is due to the arrangement of your data. I think you want your data to be  
  {year: 2008, population: {class1: 20, category2 : 43, Category 3: 55}}   
 If you put your data in such a way, then you have to mess with it so that you can see your  color  example For, because  forEach  works only on the ARE, and now we Data is set in an object. For some such  color.domain (d3.keys (d.population)) , follow my example on the ordinance and try some things.  d3.keys ( )  Look at the documentation to see how it works.