- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我有一些数据和 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
});
要添加这些行,我会使用 bisector针对生成的数据。平分线将允许您找到对应的 y 值到您的 ciMin 和 ciMax 所在的位置:
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);
示例代码:
<!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>
关于javascript - 我如何将置信区间添加到使用 D3 直方图绘制的分布图?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31390027/
我在 Python 中使用 matplotlib,并制作了一个带条形的直方图。现在,当直方图出现时,仅 5 的倍数出现在 x 轴上,1000 的倍数出现在 y 轴上。对于 y 轴,这完全没有问题,但对
我正在使用 JavaScript 和 jQuery。我有以下脚本每 30 秒提醒一次 hi。 $(document).ready( function() { alert("hi"); setI
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题,以便
在 Numpy(python 包)中,可以使用语法 numpy.linspace(minValue, MaxValue, numberOfSamples) 构造 float 的离散区间。 . 我看到
所以我想在 -3 到 3 的区间内制作一些数字,以便在下面绘制这些函数,所以我想要尽可能多的数字。 我这样做: double k[601]; double y[601]; for (int i = 0
我有一个 Postgresql 表,用于存储有关计划进程的信息,包括上次执行进程的时间。不同的进程对其运行频率有不同的要求。 我列出了需要重新运行的进程列表: SELECT * FROM proces
如何正确使用此类带日期间隔的查询 @SqlUpdate("delete fromlogin where created < now() - ':days days' :: interval") v
我正在尝试计算图中的间隔,我在维基百科上找到了算法的数学描述: http://en.wikipedia.org/wiki/Interval_(graph_theory) H = { n0 }
我有一个基于 Informix-SQL 的 Pawnshop 应用程序,该应用程序根据黄金的重量和纯度计算应向客户贷出多少钱。当铺的最低贷款额为 5.00 美元。当铺员工通常会借出以 5 或 0 结尾
我将 NHibernate 与代码映射一起使用,并且我有一个由此公式创建的属性。 Property(x => x.IsInOverdue, mapper => mapper .Fo
我正在尝试从头开始为 Beta 分布编写卡方拟合优度检验,而不使用任何外部函数。下面的代码报告“1”适合,即使来自 scipy.stats 的 kstest 返回零。数据是正常分布的,所以我的函数也应
如何在 C# 中将任何值四舍五入到 10 区间?例如,如果我有 11,我希望它返回 10,如果我有 136,那么我希望它返回 140。 我可以很容易地用手做 return ((int)(number
如何在 Go 中表示 PostgreSQL 区间? 我的结构看起来像这样: type Product struct { Id int Name
我想编写一个函数,将数值限制在封闭的 0,1 区间内: func clamp01(_ value:T) -> T { return value 1 ? 1 : value } 在 Swift 3
我有一个简单的表格,用于存储来自在线仪表的降水读数。这是表定义: CREATE TABLE public.precip ( gauge_id smallint,
a = y def __gt__(self, y): return not self.x > y def __eq__(self, y): return
我正在处理 pandas 数据框 D=pd.DataFrame(data=[1.0,2.0,2.0,2.0,5.0,3.0,2.0,2.0,5.0,5.0,8.0,1.0]) 我识别低于特定阈值的值
我编写了一些C++代码来解决此问题: #include #include using namespace std; unsigned int countSetBits(unsigned int n
好的,我知道之前有人用一个有限的缩放示例问过这个问题 [-1, 1]间隔 [a, b] Different intervals for Gauss-Legendre quadrature in num
我是一名优秀的程序员,十分优秀!