D3.js 直方图 - x 轴上的位置标签和每个 bin 的数量

Question

使用 D3 (v3) 调整直方图我发现有两个问题需要解决 (original code here)：

<script type="text/javascript">
    var faithfulData = [20,21,26,18,24,24,25,25,21,20,20,18,28,23,17,26,27,27,20,28,23,26,];
    var datos_unicos = Array.from(new Set(faithfulData))
    var margin = {top: 4, right: 10, bottom: 40, left: 40},
        width = 360 - margin.left - margin.right,
        height = 180 - margin.top - margin.bottom;

    var cant_ticks = datos_unicos.length;
    var edad_min = Math.min.apply(Math, datos_unicos) - 3;
    var edad_max = Math.max.apply(Math, datos_unicos) + 3;

    var vartickValues = []
    var tope = (edad_max)+1;
    for (var i =edad_min; i< tope; i++) {
        vartickValues.push(i);
    }

    var x = d3.scale.linear()
        .domain([edad_min, edad_max])
        .range([0, width]);

    var y = d3.scale.linear()
        .domain([0, .1])
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .tickValues(vartickValues)
        .orient("bottom");

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .tickFormat(d3.format("%"));

    var line = d3.svg.line()
        .x(function(d) { return x(d[0]); })
        .y(function(d) { return y(d[1]); });

    var histogram = d3.layout.histogram()
        .frequency(false)
        .bins(cant_ticks);

    var svg = d3.select("#plantel_distribucion").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    svg.append("g")
        .attr("class", "x plantel_axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis)
      .append("text")
        .attr("class", "label")
        .attr("x", width)
        .attr("y", 34)
        .style("text-anchor", "end")
        .text("Edad de las jugadoras");

    svg.append("g")
        .attr("class", "y plantel_axis")
        .call(yAxis);

      var data = histogram(faithfulData),
          kde = kernelDensityEstimator(epanechnikovKernel(7), x.ticks(100));

      svg.selectAll(".plantel_bar")
          .data(data)
        .enter().insert("rect", ".axis")
          .attr("class", "plantel_bar")
          .attr("x", function(d) { return x(d.x) + 1; })
          .attr("y", function(d) { return y(d.y); })
          .attr("width", x(data[0].dx + data[0].x) - x(data[0].x) - 1)
          .attr("height", function(d) { return height - y(d.y); });

      svg.append("path")
          .datum(kde(faithfulData))
          .attr("class", "plantel_line")
          .attr("d", line);
    //});

    function kernelDensityEstimator(kernel, x) {
      return function(sample) {
        return x.map(function(x) {
          return [x, d3.mean(sample, function(v) { return kernel(x - v); })];
        });
      };
    }

    function epanechnikovKernel(scale) {
      return function(u) {
        return Math.abs(u /= scale) <= 1 ? .75 * (1 - u * u) / scale : 0;
      };
    }
</script>

1) 如何将标签放在 bin 中心的 x 轴上？换句话说，刻度线及其位于条形中心的标签。

2) 如何将每个 bin 的数量（频率）置于其条形上方？

感谢您的 cmets 并留下当前发展的图像：

谢谢

Answer 1

对于问题1，如果你只是想在每个bin的中心添加一些刻度，直方图中有x和dx属性表示每个bin的位置和步长。您可以通过 xtick = x + dx / 2 计算 x 刻度。

对于问题2，我觉得可以在直方图上方画一个折线图，将z-index设置为2。

我希望以上内容有所帮助。 :)