1

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

虽然大部分看起来都是对的，但我仍然对

  1. 为什么 x 轴上没有像上例中的给定输入那样的“14”？取而代之的是 13 得到应该是 14 的纵坐标

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

我使用序数比例的主要动机是使刻度在条形下方居中对齐，这与 Mike 在他 的直方图演示中使用的不同。出于同样的目的，我还使 bin 的数量等于 d3.layout.histogram() 中的刻度数。我确信可能有更好的方法来编码我正在寻找的内容

还有任何想法如何添加指标线的“图形”，就像在nvd3 可视化中完成的那样（背景为浅灰色），这将使它更令人愉悦？

4

1 回答 1

3

没有， x 轴上14有两个s。8这是因为该函数会根据 API 参考bins将范围划分= 14 - 1 = 13为多个14区间：

bins 可以指定为一个数字，在这种情况下，值的范围将被均匀地分成给定数量的 bins。或者，bins 可以是一个阈值数组，定义了 bins；指定的数组必须包含最右边（上）的值，因此为 n 个 bin 指定 n + 1 个值。...

在解决这个问题之前，我猜你面临的第二个问题是如果rangeDefault有负值，那么有些值不会被绘制。为了解决这个问题，不知道它的确切需求，我将从删除以下内容开始：

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

然后要解决第一个问题，请使用第二种形式的参数，bins如下所示：

  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);

我希望这能解决主要问题。

添加浅灰色指示线相当容易，如下所示。变化是：

vis.css

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

vis.js

Moving the axis before the chart in the DOM because of how SVG is laid out affects its 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");

And finally making the major tickSize on the y-axis -(width - margin.right - margin.left):

yAxis = d3.svg.axis()
            .scale(y)
            .orient("left")
            .tickSubdivide(true)
            .tickPadding(5)
            .ticks(10)
            .tickSize(-(width - margin.right - margin.left), 2, 8);
于 2013-01-23T21:11:02.703 回答