用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>元素表示，然後將矩形和錯誤欄路徑附加到其中，而無需單獨計算數據連接。