我正在使用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(“height”,function(d){return y0(d) - y1(d);});
任何帮助都会很棒 .
2 回答
我认为开始使用对数刻度的基本(非堆叠)条形图会很有帮助 -
您需要为比例表示法指定名称,例如:
然后使用此比例更改为屏幕空间,例如:
以下是您查看的基本示例:http://jsfiddle.net/jsl6906/qAHC2/10/
简短指南 .
使用
stack
作为原始数据集 .使用D3
scale
的特殊设置创建具有对数值的第二个数据集 .再次使用
stack
作为结果集 .Full code: http://jsfiddle.net/romanshamin/5vF6a/2/