Javascript d3js框须图：添加一个圆来绘制分布中的给定点

如何添加一个圆来绘制分布中的给定点

我想修改一个盒子和胡须的情节。我的目标是在给定的绘图上标记单个数据点。在绘制分布图时，最好能说明给定元素在该分布图上的位置

从视觉上看，我目前的尝试产生了如下结果：

但这里真的是犹太人区。红色

标记

通过使用

轴

、附加单独的

g

元素并尝试模拟

y

比例来绘制。代码

这种方法是不一致的，看起来不太好

理想情况下，我希望修改并包括如下所述的异常值

选择一个数据点，在绘图上进行标记。容易吧

最初的尝试： 我想任意选择任何数据点，并在d3js箱线图上显示的位置画一个圆圈

到目前为止，我已经尝试对异常值的代码进行调整，这与我想要实现的功能非常相似：在绘图上为给定数据点绘制一个圆（具有唯一的

名称

）

示例中的代码如下：如何创建范围/域/比例

  // Compute whiskers. Must return exactly 2 elements, or null.
  var whiskerIndices = whiskers && whiskers.call(this, d, i),
      whiskerData = whiskerIndices && whiskerIndices.map(function(i) { return d[i]; });

  // Compute outliers. If no whiskers are specified, all data are "outliers".
  // We compute the outliers as indices, so that we can join across transitions!
  var outlierIndices = whiskerIndices
      ? d3.range(0, whiskerIndices[0]).concat(d3.range(whiskerIndices[1] + 1, n))
      : d3.range(n);

创建

异常值索引后，它将被传递到
.data（）
，其中
Number
作为一个时髦的第二个参数

  // Update outliers.
  var outlier = g.selectAll("circle.outlier")
      .data(outlierIndices, Number);

  outlier.enter().insert("circle", "text")
      .attr("class", "outlier")
      .attr("r", 5)
      .attr("cx", width / 2)
      .attr("cy", function(i) { return x0(d[i]); })
      .style("opacity", 1e-6)
    .transition()
      .duration(duration)
      .attr("cy", function(i) { return x1(d[i]); })
      .style("opacity", 1); 

在浏览了您给出的代码之后，我认为最好的解决方案是修改该代码中的
d3.box

与其试图模仿y刻度，我认为您应该公开在
d3.box
中使用的y刻度。注意：在
d3.box
内部，“y”刻度命名为
x1（）
，尽管是垂直刻度

（1）添加一个函数
box.x1（）
，我们将调用该函数来应用缩放

box.x1 = function(x) {
    if (!arguments.length) return x1;
    return x1(x);
  };

// Left this here to show where box.x1 is being added
box.width = function(x) {
    if (!arguments.length) return width;
    width = x;
    return box;
  };

（2）因为我们在上面的
box.x1
函数中调用
x1
，所以它需要在d3.box的范围内可用（不仅仅是在执行所有d3操作的辅助box（g）{}函数中）

将x1与其他框变量一起添加：

var width = 1,
    height = 1,
    duration = 0,
    domain = null,
    value = Number,
    whiskers = boxWhiskers,
    quartiles = boxQuartiles,
    tickFormat = null;
    x1 = null;

以后定义比例时，无需将x1创建为变量，因此可能会丢失前面的
x1=…

x1 = d3.scale.linear()
      .domain(domain && domain.call(this, d, i) || [min, max])
      .range([height, 0]);

现在，当设置x1时，您可以使用box.x1（）调用它

为了实际实现这一点，我在index.html中添加了以下内容：

d3.selectAll(".box")
    .data([800]) //I just used a hardcoded value for simplicity
        .append("circle")
        .attr("cx", chart.width()/2+margin.left)
        .attr("cy", function(d){return chart.x1(d);}) // using same scale that was used to draw the box plot.
        .attr("r", 5)

单个数据点显示了它应该在哪里


由于标度以box.x1（或本例中的chart.x1）的形式显示，我认为添加点并将其放置在您想要的位置应该非常简单。
谢谢Steve。只想补充一点，我最终将
x1
的
域替换为
.domain（d3.extent（d））
，以确保当数据更新时，它将重新缩放图表。
d3.selectAll(".box")
    .data([800]) //I just used a hardcoded value for simplicity
        .append("circle")
        .attr("cx", chart.width()/2+margin.left)
        .attr("cy", function(d){return chart.x1(d);}) // using same scale that was used to draw the box plot.
        .attr("r", 5)