d3.js中的奇怪工具提示值

Question

我试图策划这样的事情：

http://bl.ocks.org/WillTurman/4631136

当然，使用我自己的数据。

这是我的代码：

.htaccess

然而，结果对我来说似乎很奇怪。例如，这里：

似乎我有61个值。

另一方面，这里：

似乎我有51.但是那里的高度比前一个要小！我认为这与一些插值有关，但我如何改善这个结果呢？到目前为止，读者可能会对阅读情节有错误的看法。

这就是我的数据：

var colorrange = [];

function chart(data, desc_colors) 
{   
    strokecolor = "#045A8D";

    var mapPlotHeight = parseInt(d3.select("#map").style("height"));
    var mapPlotHeight = parseInt(d3.select("#map").style("height"));
    var sidebarWidth = parseInt(d3.select("#sidebar").style("width"));
    var streamPlotMargin = {top: 20, right: 30, bottom: 30, left: 30};
    var streamPlotWidth = document.body.clientWidth - streamPlotMargin.left - streamPlotMargin.right - sidebarWidth;
    var streamPlotHeight = 200 - streamPlotMargin.top - streamPlotMargin.bottom;

    var colorrange = [];
    for (key in desc_colors)
    {
        colorrange.push(desc_colors[key]);
    }

    var tooltip = d3.select("body")
        .append("div")
        .attr("class", "remove")
        .style("position", "absolute")
        .style("z-index", "20")
        .style("visibility", "hidden")
        .style("top", mapPlotHeight + 50 + streamPlotMargin.top + "px") // 50 of nav top
        .style("left", sidebarWidth + 80 + "px");

    var x = d3.scale.linear()
        .range([0, streamPlotWidth]);

    var y = d3.scale.linear()
        .range([streamPlotHeight-10, 0]);

    var z = d3.scale.ordinal()
        .range(colorrange);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(24);

    var yAxis = d3.svg.axis()
        .scale(y);

    var yAxisr = d3.svg.axis()
        .scale(y);

    var stack = d3.layout.stack()
        .offset("silhouette")
        .values(function(d) { return d.values; })
        .x(function(d) { return d.hour; })
        .y(function(d) { return d.value; });

    // Group by key
    var nest = d3.nest()
        .key(function(d) { return d.key; })

    var area = d3.svg.area()
        .interpolate("cardinal")
        .x(function(d) { return x(d.hour); })
        .y0(function(d) { return y(d.y0); })
        .y1(function(d) { return y(d.y0 + d.y); });

    var svg = d3.select(".chart").attr("align","center")
        .append("svg")
        .attr("width", streamPlotWidth + streamPlotMargin.right + streamPlotMargin.left)
        .attr("height", streamPlotHeight + streamPlotMargin.top + streamPlotMargin.bottom)
        .append("g")
        .attr("transform", "translate(" + streamPlotMargin.left + "," + streamPlotMargin.top + ")");

    data.forEach(function(d) {
      d.hour = d.hour;
      d.value = +d.value;
    });

    var layers = stack(nest.entries(data));

    x.domain(d3.extent(data, function(d) { return d.hour; }));
    y.domain([0, d3.max(data, function(d) { return d.y0 + d.y; })]);

      svg.selectAll(".layer")
          .data(layers)
          .enter().append("path")
          .attr("class", "layer")
          .attr("d", function(d) { return area(d.values); })
          .style("fill", function(d, i) { return z(i); });

      svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + streamPlotHeight + ")")
          .call(xAxis);

      svg.append("g")
          .attr("class", "y axis")
          .call(yAxis.orient("left"));

      svg.selectAll(".layer")
        .attr("opacity", 1)
        .on("mouseover", function(d, i) {
          svg.selectAll(".layer").transition()
          .duration(250)
          .attr("opacity", function(d, j) {
            return j != i ? 0.6 : 1;
        })})

        .on("mousemove", function(d, i) {
          mousex = d3.mouse(this);
          mousex = mousex[0];
          var invertedx = x.invert(mousex);
          console.log(invertedx);

          pro = d.values[Math.round(invertedx)].value;

          console.log(pro);
          d3.select(this)
            .classed("hover", true)
            .attr("stroke", strokecolor)
            .attr("stroke-width", "0.5px"), 
            tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "visible");

        })
        .on("mouseout", function(d, i) {
            svg.selectAll(".layer")
                .transition()
                .duration(250)
                .attr("opacity", "1");
                d3.select(this)
                  .classed("hover", false)
                  .attr("stroke-width", "0px"), tooltip.html( "<p>" + d.key + "<br>" + pro + "</p>" ).style("visibility", "hidden");
      })

      var vertical = d3.select(".chart")
            .append("div")
            .attr("class", "remove")
            .style("position", "absolute")
            .style("z-index", "19")
            .style("width", "1px")
            .style("height", "200px")
            .style("top", mapPlotHeight + streamPlotMargin.bottom)
            .style("bottom", "0px")
            .style("left", "0px")
            .style("background", "#fff");

      d3.select(".chart")
          .on("mousemove", function(){  
             mousex = d3.mouse(this);
             mousex = mousex[0] + 5;
             vertical.style("left", mousex + "px" )})
          .on("mouseover", function(){  
             mousex = d3.mouse(this);
             mousex = mousex[0] + 5;
             vertical.style("left", mousex + "px")});
}

（17个类别×24小时样本= 432个条目）