我必须使用象限创建散点图。我查看了像d3.js,高级图表,nvd3这样的库,但我发现只有普通的散点图。
有人可以建议哪个js库可以帮我实现这个目标吗?
由于
答案 0 :(得分:1)
D3.js允许此功能。就在我的帽子顶部,你可以给它们的常规坐标,只需设置d3.scale
函数的域以允许负值。只是一个例子是
var x = d3.scale.linear().range([0, width]).domain([d3.min(data), d3.max(data)]);
这会将散点图的范围设置为您选择的宽度,但允许所有值都被接受到绘图中,无论它们是正还是负。正如已经很好地解释here,缩放适合范围的大小,在范围内传播域的内容。但是,并不要求所述域是完全正面的。
如果检查数据中的最大绝对数,则可以同样格式化域,因此将轴放在绘图的中心,而不是它们未对齐。
接下来,只需像平常一样添加您的轴,只需使用x
和y
属性将它们移到画布中间。
答案 1 :(得分:0)
以下是用于创建带有象限到d3.js的散点图图表的升级的Plunker链接: -
http://plnkr.co/edit/yEfkN0tn7DPAypAvyWjD?p=preview
<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>