Javascript 如何将置信区间添加到使用D3直方图绘制的分布图中？

我有一些数据和JS代码来生成D3直方图。这是我的密码：

var values = dataDict[key]['data'];
var confidence_interval = dataDict[key]['ci'];

var margin = {top: 10, right: 30, bottom: 30, left: 30},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;


var domain = [Math.floor(d3.min(values)) - 1, Math.ceil(d3.max(values)) + 1];

var x = d3.scale.linear()
.domain(domain)
.range([0, width]);

var numbins = 150;
var data = d3.layout.histogram()
.bins(x.ticks(numbins))
(values);

var y = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.y; })])
.range([height, 0]);

var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");

var svg = d3.select('#' + distributionGraph.id).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var bar = svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.attr("transform", function (d) {
    return "translate(" + x(d.x) + "," + y(d.y) + ")";
});

bar.append("rect")
.attr("x", 1)
.attr("width", x(data[0].x  + data[0].dx) - 1)
.attr("height", function(d) { return height - y(d.y); });
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);

这将生成如下图形：

我想补充一点来说明95%的置信区间。我已经计算了时间间隔，我只想知道如何添加图形

我想补充如下：

超过我已有的直方图

---

在我的示例中，我将在-0.98和3.45标记处添加两条垂直线，在这两条垂直线之间，我想更改直方图中条形的颜色。我该怎么做呢？

假设您对变量

ciMin

和

ciMax

有置信区间。您可以使用以下选项更改条形图的颜色：

bar.append("rect")
  .attr("x", 1)
  .attr("width", x(data[0].x + data[0].dx) - 1)
  .attr("height", function(d) {
    return height - y(d.y);
  })
  .style('fill', function(d){
    return (d.x > ciMin && d.x < ciMax) ? 'orange' : 'steelblue'; // set color based on where it is
  });

然后添加以下行：

var ci = svg.append('g')
  .attr('class','ci');

ci
  .append('line')
  .attr('x1', x(data[biMin].x))
  .attr('x2', x(data[biMin].x))
  .attr('y1', height)
  .attr('y2', y(data[biMin].y))
  .style('stroke','black')
  .style('stroke-width', 5);

ci.append('line')
  .attr('x1', x(data[biMax].x))
  .attr('x2', x(data[biMax].x))
  .attr('y1', height)
  .attr('y2', y(data[biMax].y))
  .style('stroke','black')
  .style('stroke-width', 5);

示例代码：

//var值=dataDict[key]['data']；
//var置信区间=dataDict[key]['ci']；
var ciMin=0.3，
ciMax=0.7；
var值=d3.范围（1000）.映射（d3.随机.贝茨（5））；
var保证金={
前10名，
右:30,，
底数：30，
左：30
},
宽度=960-margin.left-margin.right，
高度=500-margin.top-margin.bottom；
var域=[Math.floor（d3.min（值））-1，Math.ceil（d3.max（值））+1]；
var x=d3.scale.linear（）
.domain（域）
.范围（[0，宽度]）；
var numbins=150；
var data=d3.layout.histogram（）
.垃圾箱（x.蜱虫）
（价值观）；
控制台日志（数据）；
变量y=d3.scale.linear（）
.domain（[0，d3.max（数据，函数（d））{
返回d.y；
})])
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var svg=d3。选择（'body'）。追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
var bar=svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“g”）
.attr（“类”、“条”）
.attr（“转换”，函数（d）{
返回“translate”（“+x（d.x）+”，“+y（d.y）+”）；
});
附加条（“rect”）
.attr（“x”，1）
.attr（“宽度”，x（数据[0].x+数据[0].dx）-1）
.attr（“高度”，功能（d）{
返回高度-y（d.y）；
})
.样式（“填充”，功能（d）{
返回（d.x>ciMin&d.x

var ci = svg.append('g')
  .attr('class','ci');

ci
  .append('line')
  .attr('x1', x(data[biMin].x))
  .attr('x2', x(data[biMin].x))
  .attr('y1', height)
  .attr('y2', y(data[biMin].y))
  .style('stroke','black')
  .style('stroke-width', 5);

ci.append('line')
  .attr('x1', x(data[biMax].x))
  .attr('x2', x(data[biMax].x))
  .attr('y1', height)
  .attr('y2', y(data[biMax].y))
  .style('stroke','black')
  .style('stroke-width', 5);