d3js Box和Whisker图：在分布

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的代码，这些代码与我想要实现的内容非常相似：在绘图上为给定数据点渲染一个圆（具有唯一{ {1}}）。

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

name

创建 // 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()作为一个时髦的第二个arg。

Number

Answer 1

在你给出的box plot example之后，我认为最好的解决办法是修改该代码中的d3.box ......

我认为你应该公开d3.box 中使用的y标度，而不是试图模仿y标度。注意：在d3.box内部，“Y”标度被命名为{{1尽管是垂直比例。

（1）添加我们将调用以应用缩放的函数x1()

box.x1()

（2）由于我们在上述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; }; 函数中调用x1，因此需要在d3.box的范围内提供它（不仅仅是在辅助框中（g） {}功能完成所有d3的工作）

使用其他框变量添加x1：

box.x1

以后在定义比例时无需将x1创建为变量，因此您可能会丢失var width = 1, height = 1, duration = 0, domain = null, value = Number, whiskers = boxWhiskers, quartiles = boxQuartiles, tickFormat = null; x1 = null; 之前的var

x1 =...

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

调用它

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

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

个别数据点出现在它应该的位置......

以box.x1（或在本例中为chart.x1）的形式公开缩放比例，我认为添加点并将它们放置在您想要的位置应该非常简单。