D3 Multicolumn Relative Stack Chart

Question

В настоящее время я изменяю следующий пример, чтобы создать диаграмму горизонтальных относительных стеков. Следующий пример - пример «одиночной» таблицы стека.

http://jsfiddle.net/zDkWP/

Вот моя версия, однако я получаю значение NaN X и Width, и я ищу, чтобы выяснить, почему. Спасибо.

В SVG структура представлена ​​ниже для каждого из: -

г [г [прямоугольник, прямоугольник, прямоугольник]], г [г [прямоугольник, прямоугольник, прямоугольник]]

Здесь мой код: http://jsfiddle.net/scottietom/7c3vb4e9/

 var dataset = [ 
         [ 
         [{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]], 
         [[{x: 0,y: 100}],[{x: 0,y: 30}],[{x: 0,y: 50}]] 
         ]; 

     //Set up stack method 
     var stack = d3.layout.stack(); 

     //Data, stacked 
     for (i=0; i<dataset.length; i++) { 
      stack(dataset[i]); 
     } 

     //Set up scales 
     var xScale = d3.scale.linear() 
      .domain([0, d3.max(dataset, function (d) { 
       return d3.max(d, function (d) { 
       return d.y0 + d.y; 
      }); 
     })]) 
     .range([0, w]); 

     //Easy colors accessible via a 10-step ordinal scale 
     var colors = d3.scale.category10(); 
     //or make your own colour palet 
     var color = d3.scale.ordinal() 
      .range(["#1459D9", "#148DD9", "#87ceeb", "#daa520"]); 

     //Create SVG element 
     var svg = d3.select(".pathanalysis_diagram") 
      .append("svg") 
      .attr("width", w + margin.left + margin.right) 
      .attr("height", h + margin.top + margin.bottom) 
      .append("g") 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

     // Add a group for each row of data 
     var groups = svg.selectAll("g") 
      .data(dataset) 
      .enter() 
      .append("g") 
      .style("fill", function (d, i) { 
      return color(i); 
     }); 

     // Add a rect for each data value 
     var rects = groups.selectAll("rect") 
      .data(function (d) { 
       return d; 
      }) 
      .enter() 
      .append("rect") 
      .attr("x", function (d) { 
       return xScale(d.y0); 
      }) 
      .attr("y", 50) 
      .attr("height", 50) 
      .attr("width", function (d) { 
       return xScale(d.y); 
      }); 

Answer 1

Вот такой JSFiddle с раствором: http://jsfiddle.net/ee2todev/z73u6mro/

я назвал вложенные наборы данных arrayOfDatasets поэтому изменения становятся все более слы уха. Сначала вы должны стек вызовов() для каждого из наборов данных:

arrayOfDatasets.forEach(function (dataset) {stack(dataset); }); 

Затем вы должны извлечь максимум для XScale:

var xScale = d3.scale.linear() 
    .domain([0, d3.max(arrayOfDatasets, function (dataset) {  
     return d3.max(dataset, function (d) { 
     return d3.max(d, function (d) { 
      return d.y0 + d.y; 
     }); 
     }) 
    })]) 
    .range([0, w]); 

Наконец, вы просто должны получить доступ к данным должным образом и переводить наборы данных, чтобы они не перекрывали друг друга:

var groupOfGroups = svg.selectAll("g.toplevel") 
    .data(arrayOfDatasets) 
    .enter() 
    .append("g") 
    .attr("class", "toplevel") 
    .attr("transform", function(d, i) {return "translate(0, " + (-i * 55) + ")"; }); 

// Add a group for each row of data 
var groups = groupOfGroups.selectAll("g.dataset") 
    .data(function(d) {return d; }) 
    .enter() 
    .append("g") 
    .attr("class", "dataset") 
    .style("fill", function (d, i) { 
    return color(i); 
}); 

вы можете по-прежнему хранить наборы данных по-разному, так как это не понятно, почему у вас есть значения х в них.