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

Question

首先我想知道是否有人知道D3错误条显示分组条形图的例子吗？我发现的最接近的事情是：

http://tenxer.github.io/xcharts/examples/（示例自定义显示类型：错误条） http://bl.ocks.org/chrisbrich/5044999（错误分条）

我有分组条形图的工作示例，我想补充显示MOE的图形中的每个条的错误栏。我需要采取哪些步骤来实现这一目标？我将如何计算线的位置？这是我认为需要完成的事情，请帮我填写我需要采取的步骤。

1. 创建SVG线

2. 采取d.value +教育部和d.value的d3.max的d3.max计算该行的y最小和y - 教育部

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方法）。

但是，您不会一次调用所有数据的路径生成器，您必须创建连接到数据的路径选择，然后将数据对象作为一个（区域生成器）或两个点（线发生器）数组到发生器功能。

这应该工作：

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访问器函数来创建类似上面代码示例中的对象。但是，如果您想要一个带有水平顶部和底部线条的自定义形状的错误栏，则需要编写自己的函数以基于数据对象创建路径"d"属性。我在this answer中讨论这样做，因为错误条的形状实际上会简单得多，因为它们都是直线。您可能会发现this tutorial on the path directions syntax是一个有用的参考。

最后，您可能还希望重新编写条形图代码，以便每个条由代表连接到数据的<g>元素表示，然后将矩形和错误栏路径附加到其中，而无需单独计算数据连接。