javascript - d3js 盒须图 : add a single circle to plot given a point in the distribution

Question

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

我正在寻找修改 this popular d3js example盒须图。我的目标是在给定图上标记单个数据点。在绘制分布图时，最好能够说明给定元素在该分布上的位置!

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

但这确实是贫民窟。红色标记是通过使用axis绘制的，附加一个单独的g元素并尝试模仿y比例。代码via GitHub

var yAxis = d3.svg.axis()
    .scale(y)
    .tickSubdivide(1)
    .tickSize(0, 6, 0)
    .ticks(1)
    .tickValues([skater_val])
    .tickFormat(function (d, i) {
        // add the marker as axis label  
        return skater_val + "  >";  
    })
    .orient("right");

 // draw y axis
svg.append("g")
    .attr("class", "y axis")
    .attr("transform", "translate(" + -10 + "," + 0 + ")")
    .call(yAxis);

这种方法不一致，而且看起来不太好。

理想情况下我想修改 d3.box()并包括如下所述的离群值之类的内容。

选择一个数据点，将其标记在绘图上。容易吧？ ...

原始尝试:

我想任意选择任何数据点并在它出现在 this popular example 的 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);

创建outlierIndices后，它被传递到.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); 

Answer 1

浏览 box plot example 后你给出的，我认为最好的解决方案是修改该代码中的 d3.box ...

我认为您应该将 d3.box 中使用的 y 比例公开，而不是尝试模仿 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 的范围内可用(不是就在辅助 box(g){} 函数中，该函数执行所有 d3 操作)

将 x1 添加到其他框变量中:

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

稍后定义比例时无需创建 x1 作为变量，因此您可以丢失 x1 =... 前面的 var

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)的形式公开，我认为添加点并将它们放置在您想要的位置应该非常简单。