d3.js Уложенная гистограмма с логарифмическим масштабированием

Question

Я использую d3.js для создания сложной гистограммы, подобной http://mbostock.github.com/d3/ex/stack.html, с некоторыми дополнительными функциями. Я смог добавить метки и сетку, но у меня возникают некоторые проблемы с реализацией масштаб журнала. Я использую

d3.scale.log().domain([minNum,maxNum]).range([height,0]) 

, но я не могу понять, как реализовать его с помощью сложенной графа, со следующим кодом:

var vis = d3.select("#chart") 
.append("svg") 
.attr("width", width) 
.attr("height", height + margin); 

var layers = vis.selectAll("g.layer") 
.data(data) 
.enter().append("g") 
.style("fill", function(d, i) { return color(i/(n - 1)); }) 
.attr("class", "layer"); 

var bars = layers.selectAll("g.bar") 
.data(function(d) { return d; }) 
.enter().append("g") 
.attr("class", "bar") 
.attr("transform", function(d) { return "translate(" + x(d) + ",0)"; }); 

bars.append("rect") 
.attr("width", x({x: .9})) 
.attr("x", 0) 
.attr("y", y1) 
.attr("height", function(d) { return y0(d) - y1(d); }); 

Я знаю, он имеет дело с: .attr («высота» , функция (d) {return y0 (d) - y1 (d);});

Любая помощь будет отличной.

Answer 1

Я думаю, что было бы полезно для вас, чтобы начать с основной (не уложенной) гистограммой с логарифмической шкалой -

Вы хотите придать представление масштаба имени, например:

var myscale = d3.scale.log().domain([minNum,maxNum]).range([height,0]); 

Затем используйте эту шкалу позже, чтобы изменить пространство экрана, например:

.attr("height", function(d) {return myscale(d);}) 

Вот простой пример для вас, чтобы посмотреть на: http://jsfiddle.net/jsl6906/qAHC2/10/

Answer 2

Краткое руководство.

1. Используйте stack для исходного набора данных.
2. Используйте специальные настройки D3 scale, чтобы создать второй набор данных с логарифмическими значениями.
3. Снова используйте stack для результирующего набора.

// Original linear data 
var linData = [ 
    [ 
     { x: 0, y:  0.1 }, 
     { x: 1, y:  1.0 }, 
     { x: 2, y: 100.0 }, 
     { x: 3, y: 10000.0 } 
    ], 
    [ 
     { x: 0, y:  0.2 }, 
     { x: 1, y:  2.0 }, 
     { x: 2, y: 200.0 }, 
     { x: 3, y: 20000.0 } 
    ], 
    [ 
     { x: 0, y:  0.3 }, 
     { x: 1, y:  3.0 }, 
     { x: 2, y: 300.0 }, 
     { x: 3, y: 30000.0 } 
    ] 
]; 


// Calculating y0 for linear data 
var stack = d3.layout.stack(); 
stack(linData); 

// Setting conversion values from linear to logarithmic without scaling 
var yScaleLog = d3.scale.log() 
     .domain([0.01, 
      d3.max(linData, function(d) { 
       return d3.max(d, function(d) { 
        return d.y0 + d.y; 
       }); 
      }) 
     ]) 
     .range([0, 
      d3.max(linData, function(d) { 
       return d3.max(d, function(d) { 
        return d.y0 + d.y; 
       }); 
      }) 
     ]); 

// Creating new set of data with logarithmized values 
var logData = []; 
for (var i = 0; i < linData.length; i++) { 
    logData[i] = []; 
    for (var j = 0; j < linData[i].length; j++) { 
     logData[i][j] = { 
      x: linData[i][j].x, 
      y: yScaleLog(linData[i][j].y) 
     }; 
    } 
} 

// Calculating y0 for logarithmic data 
stack(logData); 

Полный код: http://jsfiddle.net/romanshamin/5vF6a/2/