直方图：所有 bin 的长度为 0答案

【问题标题】：Histogram: All bins have 0 length直方图：所有 bin 的长度为 0
【发布时间】：2019-03-28 00:27:20
【问题描述】：

我正在 d3 中创建一个直方图。在处理了一个更大的数据集后，我得到了以下数据集，分数范围从 0 到 10。

m_data = [6, 9, 5, 6, 7, 5, 8, 7, 4, 7, 4, 3, 5, 8, 5, 4, 8, 7, 6, 9, 4, 6, 8]

问题在于，从我们的“binmaker”创建的 bin 不会将来自 m_data 的数据绑定到相应的 bin。

我们使用m_data 创建垃圾箱。我们使用 10 个刻度 (0-10)。围绕 D3 v5 中直方图的特定问题的信息很少。

var dataP = d3.json("classData.json");
dataP.then(function(data)
{
  drawChart(data);

})

var drawChart = function(data)
{

  // dimensions //
  var screen =
  {
    width: 500,
    height: 400
  }

  var margins =
  {
    top:10,
    bottom:40,
    left:40,
    right:100
  }
  var width = screen.width-margins.left-margins.right;
  var height = screen.height-margins.top-margins.bottom;

  var day = 7;

  // data manipulation //
  var m_data = data.map(function(d) { return d.quizes[day+1].grade; });
  console.log(m_data);
  //create scales
  var xScale = d3.scaleLinear()
                .domain([0,10])
                .range([0,width])
                .nice();

  // create histogram and binmaker
  var binMaker = d3.histogram()
                .domain([xScale.domain()])
                .thresholds(xScale.ticks(10));
  var bins = binMaker(m_data); // how this is created? //
  // bins.shift();
  // bins.pop();

  // console.log("bin 0: " + bins[0].x0);
  console.log('bins',bins);

  var yScale = d3.scaleLinear()
                .domain([0, d3.max(bins, function(d) { return d.length; } )])
                .range([height, 0]);

  // create svg
  var svg = d3.select("svg").attr("width",width)
                            .attr("height",height);
  svg.append('g').call(d3.axisLeft(yScale));
  svg.append('g').attr("transform","translate(0,"+height+")").call(d3.axisBottom(xScale));
  var plotLand = svg.append('g')
                    .classed("plot",true)
                    .attr("transform","translate("+margins.left+","+margins.top+")");

  // create dom elems for bins
  plotLand.selectAll('rect')
          .data(bins)
          .enter()
          .append("rect")
          .attr("x",function(d) {return xScale(d.x0);})
          .attr("width",function(d)
          {
               return xScale(d.x1)-xScale(d.x0);
          })
          .attr("y",function(d){return yScale(d.length);})
          .attr('height',function(d)
          {
            return height - yScale(d.length);
          })






}

在为直方图创建了 bin 之后，我们遇到了所有 bin 的长度都为：0; 的问题。我们的m_data 值不会放入各自的 bin 中。

【问题讨论】：

我试过你的代码。似乎没有定义xScale。这是图表的完整代码吗？
我很抱歉。我将更新整个代码。我感谢您的帮助！ @酷拉
现在更新了@Coola

标签： javascript d3.js

【解决方案1】：

如果您设置直方图生成器的domain，它必须是an array：

bin域定义为数组[min,max]，其中min是最小可观测值，max是最大可观测值。

但是，你有这个：

var binMaker = d3.histogram()
    .domain([xScale.domain()])

因为xScale.domain() 本身就是一个数组：

[0,10]

你最终会得到：

var binMaker = d3.histogram()
    .domain([[0, 10])

这显然行不通。所以，就这样吧：

var binMaker = d3.histogram()
    .domain(xScale.domain())
    //no square brackets--^

这里是演示：

m_data = [6, 9, 5, 6, 7, 5, 8, 7, 4, 7, 4, 3, 5, 8, 5, 4, 8, 7, 6, 9, 4, 6, 8];
var xScale = d3.scaleLinear()
  .domain([0, 10])
  .nice();
var binMaker = d3.histogram()
  .domain(xScale.domain())
  .thresholds(xScale.ticks(10));
var bins = binMaker(m_data);
console.log(bins);

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"&gt;&lt;/script&gt;

【讨论】：