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

Question

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

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

在视觉上，我目前的尝试产生了这样的结果:

但这真的很贫民窟。红色 marker 是通过使用 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()并包括如下所述的 outliers 之类的内容。

选择一个数据点，在图上标记它。简单吧？ ...

原始尝试:

我想任意选择任何数据点并在它出现在 this popular example 的 d3js 箱线图上的位置画一个圆圈 | .

到目前为止，我已经尝试为 outliers 调整代码，它做的事情与我想要实现的非常相似:在给定数据点的绘图上呈现一个圆圈(具有独特的姓名)。

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

  // 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...

与其尝试模仿 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 操作的辅助框 (g){} 函数中)

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