在直方图线下绘制与直方图值一样多的圆

Question

正如标题所暗示的那样，我试图使用线条下方的圆圈来显示直方图箱的值。为了达到这个目的，我认为最好的选择是使用虚线，但截至目前我并不确定。我遇到的问题是，由于这个直方图是交互式的，因此可以更改分档，以便圆圈相应地缩放 到目前为止我可以在这里访问：
http://dl.dropboxusercontent.com/u/37967455/confronto_pesi.html
（请检查无框并使用该行作为参考）
如您所见，使用滑块有时会返回正确的点数，有时则不会。我的猜测是它可能与点的宽度和间距有关。
用于构建虚线的部分就是这样（我使用两条线来伪造圆圈）：

var dline1 = svg.append("g")
                .attr("id", "dline1");
dline1.selectAll("line")
                .data(histogSans)
                .enter()
                .append("line")
                .attr("x1", function (d, i) { return x(histogSans[i].x); })
                .attr("x2", function (d, i) { return x(histogSans[i].x); })
                .attr("y1", y(1))
                .attr("y2", function (d, i) { return y(histogSans[i].y); })
                .attr("stroke", "#386cb0")
                .attr("stroke-width", 4)
                .attr("stroke-linecap", "round")
                .attr("stroke-dasharray", "0, " + parseFloat(y(32.75)) + "");
var dline2 = svg.append("g")
                .attr("id", "dline2");
dline2.selectAll("line")
                .data(histogSans)
                .enter()
                .append("line")
                .attr("x1", function (d, i) { return x(histogSans[i].x); })
                .attr("x2", function (d, i) { return x(histogSans[i].x); })
                .attr("y1", y(1))
                .attr("y2", function (d, i) { return y(histogSans[i].y); })
                .attr("stroke", "white")
                .attr("stroke-width", 2)
                .attr("stroke-linecap", "round")
                .attr("stroke-dasharray", "0, " + parseFloat(y(32.75)) + "");

可以用更简单的方式完成，也许使用圆圈代替？我不确定使用圆圈是如何将它们放在正确的位置和正确的数字，就像我想要做的虚线。
任何帮助都会很棒，谢谢！

编辑：抱歉没有意识到这种（有点）在safari中工作但在chrome上没有，我想要得到的是： 但是圈子也会使用滑块进行更新，并显示与直方图值匹配的正确圆圈数

Answer 1

“我不确定使用圆圈是如何将它们放在正确的位置和正确的数字，就像我想要做的虚线一样。”

可以将圆圈指定为x位置，该位置对应于与直方图条形相同的值。

dline2.selectAll("circle")
  .data(histogSans)
  .enter()
  .append("circle")
  .attr({
    "cx": function (d, i) { return x(histogSans[i].x); }, 
    "cy": function (d, i) { return height + 10px}, // ie. some constant just below your bars
    "r": 5px
  });

数据集将确定满足数量的圆圈数（var numCircles = histogSans.length）。

Answer 2

你所拥有的基本上是nested selection - 对于每个bin，添加代表值的圆圈。在您的情况下唯一的困难是确定x位置的属性仅在父级而不是嵌套中可用。通过复制该值可以很容易地解决这个问题。

相关代码如下。

SansCircleGroup.selectAll("g.circle")
    .data(histogSans)
    .enter()
            .append("g")
            .attr("class", "circle")
            .each(function(d) { d.forEach(function(e) { e.x = d.x; }); })
            .selectAll("circle")
            .data(function (d) { return d; })
            .enter()
            .append("circle")
            .attr("cx", function (d, i) { return x(d.x); })
            .attr("cy", function (d, i) { return y(i+1); })
            .attr("r", 2)
            .style("fill", "white")
            .style("stroke", "#386cb0")
            .style("stroke-width", 1);

完整示例here。