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

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

完整代码：

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/

如果您希望为每个组创建单独的图表，就像在原始小提琴中一样，您只需要使用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);

完整的小提琴在这里：http://jsfiddle.net/ee2todev/en8sr5m4/

另外两个笔记： 1）我只是略微改变了你的代码。我强烈建议使用有意义且直观的变量/对象名称。这对我来说是最有效的方法来减少错误。这可能是你感到困惑的原因。所以我会重命名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;})

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

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

1 个答案: