使用d3生成的直方图进行了小的调整

Question

以下是我用于使用d3和一些jQuery生成直方图的精简版本。 http://bl.ocks.org/4611158

虽然大多数的它似乎正确的，我仍然感到困惑关于

1. 为什么没有“14”在x轴作为应该在上面的例子已经给定的输入？取而代之的是13得到本来应该是14的纵坐标

2. 在我的试验中，当我尝试将刻度的输出范围改为某些非零值时，d3.layout.histogram（）分配负值（因此为非绘图表）零值。为什么这样？可能的解决方法是什么？

我的主要动机使用顺序量表是使蜱下面条中心对齐，不像是什么在他demo用于直方图迈克。为了达到同样的目的，我还让箱的数量等于d3.layout.histogram（）中的数量。我敢肯定，有可能有更好的方法来编码我正在寻找

也有任何想法如何添加指标线的'图表'，如其在nvd3 visualization（浅灰色背景）中完成，将让它更令人愉悦？

Answer 1

没有14，在x轴上有两个8 s。这是因为bins函数将努力划分范围= 14 - 1 = 13成14间隔as per the API reference：

的二进制位可被指定为一个数字，在这种情况下的值的范围将被均匀地分割 到箱中的给定数目的。或者，箱可以是一组阈值， 定义箱;指定的数组必须包含最右边的（上）值，因此 指定n个bin的n + 1个值。 ...

在解决这个问题之前，我猜你正面临的第二个问题是，如果rangeDefault具有负值，那么某些值不会被绘制。为了解决这个问题，是不知道它的确切需要，我会通过移除启动以下：

rangeDefault[0] = 0; //All histograms start from 0 <-- REMOVED 

然后解决的第一个问题，使用参数的第二种形式为binsas shown here：

var bins = []; 
    for(var ii = settings.range[0], jj = 0; ii <= settings.range[1] + 1; ii++, jj++) 
     bins[jj] = ii; 

    var data = d3.layout.histogram() 
       .bins(bins)(settings.data); 

我希望这解决了主要查询。

---

添加浅灰色指示线相当容易，as shown here。这些变化是：

vis.css

.y.axis line.tick { opacity: .3; } 

可见。JS

中，由于SVG是如何布局的DOM图表之前移动轴影响其z-index：

var gEnter = svg.enter().append("svg").append("g"); 
gEnter.append("g").attr("class", "x axis"); 
gEnter.append("g").attr("class","y axis"); 
gEnter.append("g").attr("class", "bars"); 

最后使在y轴-(width - margin.right - margin.left)主要tickSize：

yAxis = d3.svg.axis() 
      .scale(y) 
      .orient("left") 
      .tickSubdivide(true) 
      .tickPadding(5) 
      .ticks(10) 
      .tickSize(-(width - margin.right - margin.left), 2, 8);