Javascript d3.js对数缩放堆叠条形图

我使用d3.js创建了一个类似于的堆叠条形图，并添加了一些附加功能。我可以添加标签和网格，但在实现对数刻度时遇到了一些问题。我正在使用

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）{返回y0（d）-y1（d）；}）

---

任何帮助都会很好。

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

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

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

然后稍后使用此比例更改为屏幕空间，例如：

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

下面是一个供您查看的基本示例： 短指南

对原始数据集使用

stack

使用D3

scale

的特殊设置创建具有对数值的第二个数据集

对结果集再次使用

stack

//原始线性数据
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}
]
];
//线性数据的y0计算
var stack=d3.layout.stack（）；
堆栈（linData）；
//设置从线性到对数的转换值，无需缩放
var yScaleLog=d3.scale.log（）
.域（[0.01，
d3.最大值（林达，函数（d）{
返回d3.max（d，函数（d）{
返回d.y0+d.y；
});
})
])
.范围（[0，
d3.最大值（林达，函数（d）{
返回d3.max（d，函数（d）{
返回d.y0+d.y；
});
})
]);
//使用对数值创建新的数据集
var logData=[]；
对于（变量i=0；i

---

完整代码：

我遇到了一个非常古老的问题，关于为什么对数刻度对堆叠的条形图几乎没有意义，而对常规条形图或面积图（即具有底部形状的图表）几乎没有意义