Svg 在直方图线下绘制尽可能多的圆作为直方图值

正如标题所示，我正在尝试使用线条下方的圆圈来可视化直方图箱的值。为了实现这一点，我认为最好的选择是使用虚线，但到目前为止，我还不能确定。我遇到的问题是，由于此直方图是交互式的，因此可以更改垃圾箱，以便相应地缩放圆圈。
到目前为止，我所拥有的内容可以在这里访问：

（请勾选sans框并使用该行作为参考）
如您所见，使用滑块有时返回正确数量的点，有时不返回正确数量的点。
我的猜测是，它可能与点的宽度和间距有关。
用于构建虚线的部分如下所示（我使用两条线来伪造圆）：

是否可以用一种更简单的方法，或者用圆圈代替？我不确定的是如何使用圆圈将它们放在正确的位置和正确的数字，就像我试图做的虚线一样<任何帮助都会很好，谢谢

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

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

圆可以指定一个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=historgsans.length）。

基本上是一个——对于每个箱子，添加代表值的圆。本例中唯一的困难是，确定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);

---

完整示例。

不确定您在这里要做什么。类似a的东西？不，我在不改变直方图的情况下得到的结果就是我想要实现的。圆圈应该显示那个箱子里有多少个条目，所以它们现在的方式是OK，我的意思是，如果直方图的点的值是130，那么线下应该有130个圆圈，这现在不会发生，这是我无法修复的，也许用圆圈代替虚线可以解决问题，你希望这些圆圈如何显示？仅仅是一行圆？就像这行的示例一样，我想让与该bin相关的圆的数量与事实历史中bin编号的重新缩放一起工作[I]。x返回与d相同的结果。但是，您可以通过相应地设置“cy”在svg窗口中将圆定位在较低的位置。上面/下面的显示可以将cy设置为您想要的任何值。是的，但这不是自动的，需要编写大量代码，而且如果使用滑块更改箱子，则重置每个圆圈的每个cy将是一件痛苦的事情。将cy设为i的函数将在此处工作，因为i是递增的，并且应将圆圈映射到唯一的像素空间。例如，“cy”：函数（d，i）{return（height+i）；}，在1上打一个倍数，根据需要将它们隔开？

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