d3.js 中多个分组条形图中的 X，Y 域数据绑定

小提琴示例

我一直在按照这两个示例 （1）（2） 在同一页面上创建小型多个分组条形图。下面是一个 JSON 数据示例：

var data = [
{"name":"AA","sales_price":20,"retail_price":25},
{"name":"BB","sales_price":30,"retail_price":45},
{"name":"CC","sales_price":10,"retail_price":55},
{"name":"DD","sales_price":10,"retail_price":25},
{"name":"EE","sales_price":13,"retail_price":20},
{"name":"GG","sales_price":13,"retail_price":15},
];

我已经设法让条形值在每个图表中正确显示，但 X 域和 Y 域值不正确。我不知道如何将每个数据行的sales_price和retail_price绑定到轴而不是整个 JSON 数据。我想这段代码有问题：

 data.forEach(function(d) {
    d.compare = field_name.map(function(name) {       
       return {name: name, value: +d[name]}; 
    });
 });
 x0.domain(data.map(function(d) { console.log(d); return d.name; }));
 x1.domain(field_name).rangeRoundBands([0, x0.rangeBand()]);
 y.domain([0, d3.max(data, function(d) { 
       return d3.max(d.compare, function(d) {         
       return d.value; }); 
 })]);

如何使域返回每个分组条形图的每一行值？

完整代码：

function multi_bars(el){
 var margin = {top: 45, right:20, bottom: 20, left: 50},
     width = 350 - margin.left - margin.right,
     height = 250 - margin.top - margin.bottom;
 var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);
 var x1 = d3.scale.ordinal();
 var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
 var y = d3.scale.linear()
    .range([height, 0]);
 var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");
 var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");
 var field_name = ['retail_price','sales_price'];
 data.forEach(function(d) {
    d.compare = field_name.map(function(name) {       
       return {name: name, value: +d[name]}; 
    });
 });
 x0.domain(data.map(function(d) { console.log(d); return d.name; }));
 x1.domain(field_name).rangeRoundBands([0, x0.rangeBand()]);
 y.domain([0, d3.max(data, function(d) { 
       return d3.max(d.compare, function(d) {         
       return d.value; }); 
 })]);
 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 + ")");
 svg.append("g")
     .attr("class", "x axis")
     .attr("transform", "translate(0," + height + ")")
    .call(xAxis);
 svg.append("g")
     .attr("class", "y axis")
    .call(yAxis)
    .append("text")
     .attr("transform", "rotate(-90)")
     .attr("y", 6)
     .attr("dy", ".71em")
     .style("text-anchor", "end")
     .text("Price");

  // Accessing nested data: https://groups.google.com/forum/#!topic/d3-js/kummm9mS4EA
  // data(function(d) {return d.values;}) 
  // this will dereference the values for nested data for each group
  svg.selectAll(".bar")
    .data(function(d) {return d.compare;})
    .enter()
    .append("rect")
     .attr("class", "bar")
     .attr("x", function(d) { return x1(d.name); })
     .attr("width", x1.rangeBand())
     .attr("y", function(d) { return y(d.value); })
     .attr("height", function(d) { return height - y(d.value); })
     .attr("fill", color)
  var legend = svg.selectAll(".legend")
      .data(field_name.slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
 function type(d) {
  d.percent = +d.percent;
  return d;
 }
}
multi_bars(".container");