X,y Domain Data-binding In Multiple Grouped Bar Charts In D3.js

Fiddle Example I have been following these two examples (1)(2) to create small multiple grouped bar charts on the same page. Here's a JSON data example: var data = [ {'name':'AA','

Solution 1:

Your setting up of x0, x1 and y is fine.

Later when you manipulate the DOM is where your references to the data don't work. I have done two things: First I change your first block, so you create just one svg instead of

var svg = d3.select(el).selectAll("svg")
.data(data)
.enter().append("svg:svg")
 .attr("width", width + margin.left + margin.right)
 .attr("height", height + margin.top + margin.bottom)
.append("g")
 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

Later I just followed the example of http://bl.ocks.org/mbostock/3887051 and made the changes accordingly. The result is here: http://jsfiddle.net/ee2todev/g61f93gx/

If you want to have separate charts for each group as in your original fiddle you just have to translate each bar with the x0 scale. Just two adjustments have to be made:

a) you have to add the group name to the d.compare so it is accessible from the corresponding data in the bar selection

 data.forEach(function(d) {
d.compare = field_name.map(function(name) {       
   return {group: d.name, name: name, value: +d[name]}; 
});

});

b) In the bar selection you have to translate each group accordingly:

  svg.selectAll(".bar")
.data(function(d) {return d.compare;})
.enter()
.append("rect")
 .attr("class", "bar")
 .attr("transform", function(d) { return"translate(" + x0(d.group) + ",0)"; })
 .attr("x", function(d) { console.log("x: "+d.value); returnx1(d.name); })
 .attr("width", x1.rangeBand())
 .attr("y", function(d) { returny(d.value); })
 .attr("height", function(d) { return height - y(d.value); })
 .attr("fill", color);

The complete fiddle is here: http://jsfiddle.net/ee2todev/en8sr5m4/

Two more notes: 1) I just slightly changed your code. I highly recommend using meaningful and intuitive variable/object names. This is to me the most effective way to minimize errors. This might have been the reason you got confused. So I would rename the d.compare properties, e.g. {groupName: d.name, priceType: name, value: +d[name]}. As of now, you switched the meaning of name since name suddenly refers to the price type not the grouping name as in the original data!

2) This is a nice example of selection of selections. See also http://bost.ocks.org/mike/nest/ The first selectAll selection (the svg variable) contains an Array[6] with the objects. The second selection:

svg.selectAll(".bar").data(function(d) {return d.compare;})

iterates for each element of the svg data over an Array[2] containing an object with the price type and the value. There I added the group name.