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

Question

我一直在按照这两个示例 (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; }); 
 })]);

如何为每个分组的条形图制作域 return 每行的值？

完整代码：

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");

Answer 1

你设置的 x0、x1 和 y 没问题。

稍后当您操作 DOM 时，您对数据的引用不起作用。我做了两件事：首先我改变了你的第一个块，所以你只创建一个 svg 而不是

 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 + ")");

后来我只是按照http://bl.ocks.org/mbostock/3887051的例子做了相应的修改。结果在这里： http://jsfiddle.net/ee2todev/g61f93gx/

如果您想像原始 fiddle 那样为每个组创建单独的图表，您只需用 x0 比例转换每个条形图。只需进行两项调整：

a) 您必须将组名称添加到 d.compare 以便可以从栏选择中的相应数据访问

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

});

b) 在栏选择中，您必须相应地翻译每个组：

  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); 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);

完整的 fiddle 在这里：http://jsfiddle.net/ee2todev/en8sr5m4/

另外两个注意事项： 1）我只是稍微改变了你的代码。我强烈建议使用有意义且直观的 variable/object 名称。这对我来说是减少错误的最有效方法。这可能是您感到困惑的原因。所以我会重命名 d.compare 属性，例如{groupName: d.name, priceType: name, value: +d[name]}。至此，你改变了名称的含义，因为名称突然指的是价格类型，而不是原始数据中的分组名称！

2) 这是一个很好的选择选择的例子。另见 http://bost.ocks.org/mike/nest/ 第一个 selectAll 选择（svg 变量）包含一个带有对象的 Array[6]。第二选择：

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

在包含具有价格类型和值的对象的 Array[2] 上迭代 svg 数据的每个元素。我在那里添加了组名。

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

X,Y domain data-binding in multiple grouped bar charts in d3.js

javascript

svg

json

d3.js