用于创建带有象限的散点图的库
Library for creating scatter plot charts with quadrants
我必须创建带有象限的散点图。我看过像d3.js, high charts, nvd3这样的库,但我发现只有正常的散点图。
有人能建议哪个js库将帮助我实现这一点吗?
谢谢
D3.js允许此功能,如果您只是在散点图中为坐标添加负值。随便想想,你可以给出这些点的正则坐标,只要设定d3.scale
函数的定义域允许为负值。例如
var x = d3.scale.linear().range([0, width]).domain([d3.min(data), d3.max(data)]);
这将散点图的范围设置为您选择的宽度,但允许所有值都被接受到图中,无论它们是正的还是负的。正如这里很好地解释的那样,尺度适合范围的大小,在范围内传播域的内容。然而,这并不要求所述域是完全正的。
如果你在你的数据中检查最大的绝对数字,你可以同样格式化域,因此有坐标轴在你的图的中心,而不是他们是错位的。
接下来,只需添加您的轴像正常,只移动到您的画布使用x
和y
属性的中间。
这是通过d3.js创建带有象限的散点图的最新Plunker链接:-
http://plnkr.co/edit/yEfkN0tn7DPAypAvyWjD?p =
预览代码:
<script>
var svg = d3.select("#scatter"),
margin = {top: 20, right: 20, bottom: 30, left: 50},
width = +svg.attr("width"),
height = +svg.attr("height"),
domainwidth = width - margin.left - margin.right,
domainheight = height - margin.top - margin.bottom;
var x = d3.scaleLinear()
.domain(padExtent([1,5]))
.range(padExtent([0, domainwidth]));
var y = d3.scaleLinear()
.domain(padExtent([1,5]))
.range(padExtent([domainheight, 0]));
var g = svg.append("g")
.attr("transform", "translate(" + margin.top + "," + margin.top + ")");
g.append("rect")
.attr("width", width - margin.left - margin.right)
.attr("height", height - margin.top - margin.bottom)
.attr("fill", "#F6F6F6");
d3.json("data.json", function(error, data) {
if (error) throw error;
data.forEach(function(d) {
d.consequence = +d.consequence;
d.value = +d.value;
});
g.selectAll("circle")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 7)
.attr("cx", function(d) { return x(d.consequence); })
.attr("cy", function(d) { return y(d.value); })
.style("fill", function(d) {
if (d.value >= 3 && d.consequence <= 3) {return "#60B19C"} // Top Left
else if (d.value >= 3 && d.consequence >= 3) {return "#8EC9DC"} // Top Right
else if (d.value <= 3 && d.consequence >= 3) {return "#D06B47"} // Bottom Left
else { return "#A72D73" } //Bottom Right
});
g.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + y.range()[0] / 2 + ")")
.call(d3.axisBottom(x).ticks(5));
g.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + x.range()[1] / 2 + ", 0)")
.call(d3.axisLeft(y).ticks(5));
});
function padExtent(e, p) {
if (p === undefined) p = 1;
return ([e[0] - p, e[1] + p]);
}
</script>
相关文章:
- 将工具提示添加到d3散点图中
- 具有多个数据集的分组散点图D3
- d3.js散点图中的刻度标签在Firefox 13.0.1中被截断
- 在D3散点图圆上添加标签
- 在NVD3散点图上绘制标签
- 高图表散点图:点击事件时的警报坐标
- 如何从javascript散点图中的另一个变量为x和y添加新值
- d3.js可以使用来自同一来源的数据在同一张图上绘制两个散点图吗
- 谷歌散点图-{role:'style'}{role:#39;工具提示'}不能以JSON形式工作
- d3js散点图自动更新不起作用
- 使用d3制作交互式散点图
- 如何使用d3在散点图上逐个绘制/添加节点
- 对散点图使用固定的颜色集
- 从 javascript 的高图表中的折线图/散点图中的点获取工具提示内容
- 在散点图 D3.js 中动态命名轴
- D3:为多个值创建散点图
- 如何在使用Highcharts创建散点图时添加方程和R平方值
- 用于创建带有象限的散点图的库
- 使用d3.js在x轴上创建不等间隔的散点图
- 如何在d3js中创建一个接一个的散点图