Question

我正在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”创建的垃圾箱不会将m_data中的数据绑定到各个垃圾箱。

我们使用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);
          })






}

为直方图创建分箱后，我们遇到了一个问题，即所有分箱的长度为：0;我们的m_data值未放入各自的容器中。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>

直方图：所有垃圾箱的长度均为0

1 个答案: