D3. js Гистограмма - размещение меток по оси x и количество в каждой ячейке

Question

Адаптация гистограммы с D3 (v3) Я нахожу две проблемы, которые нужно решить ( здесь исходный код ):

<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) Как разместить метки на оси x в центр корзины? Другими словами, галочка и ее метка в центре полосы.

2) Как мне разместить количество (частоту) каждой ячейки над ее полосой?

Я ценю вашу комментарии и оставьте изображение с текущей разработкой:

Спасибо