使用D3.js添加误差棒到分组条形图

Question

使用D3.js添加误差棒到分组条形图

javascriptsvgd3.jsbar-chart

5

首先，我想了解一下是否有人知道一个带有误差棒的分组条形图的D3示例？我找到的最接近的东西是：

http://tenxer.github.io/xcharts/examples/（示例自定义可视化类型：误差棒） http://bl.ocks.org/chrisbrich/5044999（点的误差棒）

我有一个工作中的分组条形图示例，我想在图表中的每个条形图上添加一个误差棒来显示MOE。我需要采取什么步骤才能完成这个操作？如何计算线的位置？这是我认为需要做的事情，请帮助我填写我需要采取的步骤。

创建SVG线
通过获取d.value + MOE和d.value - MOE的d3.max来计算线的ymin和ymax
附加

这行不通，但它是正确的吗？

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);

- bailey

代码应该与您链接到的第一个示例非常相似，不是吗？ - Lars Kotthoff

如果您能生成一个示例，展示您目前所拥有的内容，那将非常有帮助。 - FernOfTheAndes

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- AmeliaBR · Accepted Answer

如果你只想要直线误差条（没有顶部和底部的水平线），那么你可以使用面积或线生成器（只有面积生成器具有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"属性。我在这个答案中讨论了如何做到这一点，对于错误栏，实际上形状会简单得多，因为它全部都是直线。您可能会发现这篇有关路径方向语法的教程很有参考价值。

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