d3.js具有对数缩放的堆积条形图 [英] d3.js Stacked bar chart with Logarithmic Scaling

问题描述

我使用d3.js来创建类似于 http：//的堆叠条形图mbostock.github.com/d3/ex/stack.html 有一些额外的功能。我能够添加标签和网格，但我有一些问题实现日志标度。我使用

  d3.scale.log（）。domain（[minNum，maxNum]）。 ]）
  

但我不知道如何使用堆叠图实现它， ：

  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）
。风格（fill，function（d，i）{return color（i /（n-1））;}）
 .attr（class，layer）; 
 
 var bars = layers.selectAll（g.bar）
 .data（function（d）{return d;}）
 .enter g）
 .attr（class，bar）
 .attr（transform，function（d）{returntranslate（+ 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）;}）;

任何帮助都会很好。

解决方案

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

您需要给您的缩放表示一个名称，例如：

  var myscale = d3.scale.log ）.domain（[minNum，maxNum]）。range（[height，0]）; 
  

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

  .attr（height，function（d）{return myscale（d）;}）
  pre> 
 
 
以下是一个基本示例，您可以查看：
  http://jsfiddle.net/jsl6906/qAHC2/10/  
 
I am using d3.js to create a stacked bar chart similar to http://mbostock.github.com/d3/ex/stack.html with some additional features.i I was able to add labels and a grid, but I am having some issues implementing a log scale. I am using     
d3.scale.log().domain([minNum,maxNum]).range([height,0]) 
but I can not figure out how to implement it with a stacked graph, with the following code:
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); });
I know it deals with:
    .attr("height", function(d) { return y0(d) - y1(d); });

Any help would be great.
解决方案
I think it would be helpful for you to start out with a basic (non-stacked) bar chart with a logarithmic scale --

You will want to give your scale representation a name, such as: 
var myscale = d3.scale.log().domain([minNum,maxNum]).range([height,0]);
Then use this scale later to change to screen space, for example:
.attr("height", function(d) {return myscale(d);})
Here is a basic example for you to look over:
http://jsfiddle.net/jsl6906/qAHC2/10/

                        
这篇关于d3.js具有对数缩放的堆积条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！