Question

我有一些数据和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);

这会生成如下图：

distribution graph

我想添加一些东西来显示95％的置信区间。我已经计算了间隔，我只想知道如何添加图形。

我想添加这样的内容：

enter image description here

超越我已经拥有的直方图

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

Answer 1

假设您在变量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
  });

要添加这些行，我会对生成的数据使用bisector。平分线将允许您找到ciMin和ciMax所在的相应y值：

var bisect = d3.bisector(function(d) { return d.x; });
var biMin = bisect.right(data, ciMin),
    biMax = bisect.left(data, ciMax);

然后添加以下行：

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

示例代码：

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>

</head>

<body>
  <script>
    //var values = dataDict[key]['data'];
    //var confidence_interval = dataDict[key]['ci'];
    
    var ciMin = 0.3,
        ciMax = 0.7;
    
    var values = d3.range(1000).map(d3.random.bates(5));

    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);
      
    console.log(data);

    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('body').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);
      })
      .style('fill', function(d){
        return (d.x > ciMin && d.x < ciMax) ? 'orange' : 'steelblue'
      });
      
      
    var bisect = d3.bisector(function(d) { return d.x; });
    var biMin = bisect.right(data, ciMin),
        biMax = bisect.left(data, ciMax);
    
    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);
      
    svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);
  </script>
</body>

</html>

＆＃13;

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

1 个答案: