d3.js 带有对数缩放的堆积条形图答案

【问题标题】：d3.js Stacked bar chart with Logarithmic Scalingd3.js 带有对数缩放的堆积条形图
【发布时间】：2012-05-27 09:29:58
【问题描述】：

我正在使用 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("身高", function(d) { return y0(d) - y1(d); });

任何帮助都会很棒。

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

我遇到了这个超级老话题，here's info，解释了为什么对数刻度对于堆叠条形图几乎没有意义，而对于常规条形图或面积图（即有底的形状的图表）来说几乎没有意义

【讨论】：

【解决方案2】：

我认为从具有对数刻度的基本（非堆叠）条形图开始会对您有所帮助 --

您需要为您的比例表示命名，例如：

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

然后用这个比例稍后改变到屏幕空间，例如：

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

这是一个基本示例，供您查看： http://jsfiddle.net/jsl6906/qAHC2/10/

【讨论】：

【解决方案3】：

简短指南。

对原始数据集使用stack。
使用 D3 scale 的特殊设置来创建具有对数值的第二个数据集。
对结果集再次使用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/

【讨论】：