javascript - d3.js 中多个分组条形图中的 X,Y 域数据绑定(bind)

Question

Fiddle Example

我一直在遵循这两个示例(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 绑定(bind)到轴而不是整个 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");

Answer 1

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

稍后当您操作 DOM 时，对数据的引用将不起作用。我做了两件事:首先我更改了你的第一个 block ，所以你只创建一个 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)我只是稍微改变了你的代码。我强烈建议使用有意义且直观的变量/对象名称。对我来说，这是减少错误的最有效方法。这可能就是你感到困惑的原因。所以我会重命名 d.compare 属性，例如{groupName:d.name，priceType:名称，值:+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 数据的每个元素。我在那里添加了组名称。