用D3.js向分组条形图中添加错误条

Question

首先，我想知道是否有人知道有一个D3示例显示带有错误条的分组条形图？我发现的最接近的东西是：

http://tenxer.github.io/xcharts/examples/ (示例自定义Vis类型:错误条) http://bl.ocks.org/chrisbrich/5044999 (点的错误条)

我有一个分组条形图的工作示例，我想在显示MOE的图表中的每个条形图中添加一个错误条。要做到这一点，我需要采取什么步骤？我如何计算这条线的位置？这是我认为需要做的，请帮助我填写我需要采取的步骤。

1. 创建SVG行
2. 用d.value + MOE的d3.max和d.value - MOE的d3.max计算直线的温度和ymax
3. 追加

这不管用，但它在正确的轨道上吗？

var line = d3.svg.line()
    .x(function(d) {return x(d.state); })
    .y0(function(d) {return y(d.value - d.moe); })
    .y1(function(d) {return y(d.value + d.moe); })
    .interpolate("linear");

var errorBarSVG = d3.select("body").append("svg")

var errorBar = errorBarSVG.append("path")
    .attr("d", line(data))
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

Answer 1

如果您只想要直线错误条(没有顶部和底部的水平线)，可以使用区域或行生成器(只有区域生成器有y0/y1方法)。

但是，您不会同时调用所有数据上的路径生成器，您必须创建与数据连接的路径选择，然后将数据对象作为一个1(区域生成器)或两点(行生成器)数组传递给生成器函数。

这应该是可行的：

var errorBarArea = d3.svg.area()
    .x(function(d) {return x(d.state); })
    .y0(function(d) {return y(d.value - d.moe); })
    .y1(function(d) {return y(d.value + d.moe); })
    .interpolate("linear");

var errorBarSVG = d3.select("body").append("svg")

var errorBars = errorBarSVG.selectAll("path")
         .data(data);

errorBars.enter().append("path");

errorBars.attr("d", function(d){return errorBarArea([d]);}) 
             //turn the data into a one-element array 
             //and pass it to the area function
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

这将为每个条创建一个零宽度区域路径，将直线中的+/-点连接起来。

如果使用行生成器函数，则在将数据转换为数组时，必须计算顶部和底部的Y值：

errorBars.attr("d", function(d){
                  return errorBarLine([{x:d.x, y:d.value - d.moe},
                                       {x:d.x, y:d.value + d.moe}]);
               })

或者，您可以使用d3.svg.diagonal创建直线错误条.对角线函数是专门设计的，用于获取单个数据对象并从中提取开始点和结束线点；然后您必须自定义source和target访问器函数，以创建类似于上面代码示例中的对象。

但是，如果您想要一个具有水平顶部和底线的自定义错误条，则需要编写自己的函数来基于数据对象创建path "d"属性。我讨论在这个答案中这样做，对于一个错误条来说，形状实际上要简单得多，因为它都是直线。您可能会发现本教程介绍路径方向语法。是一个有用的参考。

最后，您还可能希望重写条形图代码，以便每个条形图由一个与数据连接的<g>元素表示，然后在其中添加矩形和错误条路径，而不需要计算单独的数据连接。