基于Plottable.js的基本数学101散点图
如何使用Plottable.js制作一个基本的散点图，如下所示
- 我的JSON有什么问题吗？
- 如何揭示减尺度？
- 你还会做什么不同的事吗？
风格并不重要，默认的Plottable.js风格是可以的。
window.onload = function() {
var coordinates = [
{
x:"-5",
y:"3"
}, {
x:"2",
y:"-1,5"
}, {
x:"5",
y:"2,5"
}
];
var xScale = new Plottable.Scale.Linear();
var yScale = new Plottable.Scale.Linear();
var colorScale = new Plottable.Scale.Color("10");
var xAxis = new Plottable.Axis.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axis.Numeric(yScale, "left");
var plot = new Plottable.Plot.Scatter(xScale, yScale)
.addDataset(coordinates)
.project("x", "", xScale)
.project("y", "", yScale)
.project("fill", "", colorScale);
var chart = new Plottable.Component.Table([
[yAxis, plot],
[null, xAxis]
]);
chart.renderTo("#my_chart");
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<link rel="stylesheet" href="https://rawgit.com/palantir/plottable/develop/plottable.css">
</head>
<body>
<svg width="100%" height="600" id="my_chart"></svg>
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<script src="https://rawgit.com/palantir/plottable/develop/plottable.min.js"></script>
</body>
</html>
回答 2
Stack Overflow用户
发布于 2015-03-25 13:29:55
这是我刚组装好的一个两个例子。第一种是直接的plottable.js方式来做你想要的事情。第二个是被黑客攻击的plottable.js。使用plottable.js，我无法找到将轴定位在表系统之外的方法，我不得不手动移动它们。他们使用的表系统旨在减轻开发人员手动定位的困难。当然，这很好，也很容易，直到你想要控制东西的位置。
这是黑客，在你使你的可耕性之后：
// move the axis...
d3.select(".y-axis")
.attr('transform',"translate(" + width / 2 + "," + 0 + ")");
d3.select(".x-axis")
.attr("transform", "translate(" + 48 + "," + height / 2 + ")");请注意，我没有删除左侧边框(上面的48 )，可耕插入。这也可以被黑进去，但是在那个时候，什么是可以为你提供的.
应该注意的是，每个情节的不同外观完全通过CSS控制。
完整的d3散点图：
// D3 EXAMPLE
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 20
},
width = 500 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("#d3").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 + ")");
x.domain([-100, 100]);
y.domain([-100, 100]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(" + 0 + "," + height / 2 + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + width / 2 + "," + 0 + ")")
.call(yAxis)
.append("text");
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", function(d) {
return d.r;
})
.attr("cx", function(d) {
return x(d.x);
})
.attr("cy", function(d) {
return y(d.y);
})
.style("fill", function(d) {
return d.c;
});
Plottable.js：
// PLOTTABLE.JS
var xScale = new Plottable.Scale.Linear();
var yScale = new Plottable.Scale.Linear();
var xAxis = new Plottable.Axis.Numeric(xScale, "bottom");
var yAxis = new Plottable.Axis.Numeric(yScale, "left");
var plot = new Plottable.Plot.Scatter(xScale, yScale);
plot.addDataset(data);
function getXDataValue(d) {
return d.x;
}
plot.project("x", getXDataValue, xScale);
function getYDataValue(d) {
return d.y;
}
plot.project("y", getYDataValue, yScale);
function getRDataValue(d){
return d.r;
}
plot.project("r", getRDataValue);
function getFillValue(d){
return d.c;
}
plot.project("fill", getFillValue);
var chart = new Plottable.Component.Table([
[yAxis, plot],
[null, xAxis]
]);
chart.renderTo("#plottable");
d3.select(".y-axis")
.attr('transform',"translate(" + width / 2 + "," + 0 + ")");
d3.select(".x-axis")
.attr("transform", "translate(" + 48 + "," + height / 2 + ")");
Stack Overflow用户
发布于 2015-03-30 19:34:08
Mark有正确的想法--表系统本机不支持这个布局，所以您需要对它们的布局方式进行一些手动控制。然而，使用Plottable中有些模糊的部分，有一种更干净和更好支持的方法来绘制您想要的图表，它不存在轴被稍微偏移的问题。
第一个改变是我们将完全停止使用表布局引擎，因为它不能完成我们想做的事情。相反，我们将把所有的组件放在一个Component.Group中。组只是在相同的空间中覆盖组件，而根本不试图定位它们。
var chart = new Plottable.Component.Group([yAxis, xAxis, plot]);
然后，我们将使用在基本(抽象)组件类上定义的对齐和偏移方法。我们将y轴的x对齐设置为“中心”，将x轴的y对齐设置为“中心”，这将把轴放在图表的中心。
var xAxis = new Plottable.Axis.Numeric(xScale, "bottom").yAlign("center"); var yAxis = new Plottable.Axis.Numeric(yScale, "left").xAlign("center");
在这一点上，我们还没有完全完成，因为要真正地将轴中心化，我们需要将它们移回它们自身宽度的一半。只有在呈现图表时才计算宽度(严格地说，在computeLayout调用中，但这是内部详细信息)，因此我们需要在图表呈现之后设置一个偏移量：
chart.renderTo("#plottable"); xAxis.yOffset(xAxis.height()/2); yAxis.xOffset(-yAxis.width()/2);
您可以看到最终结果这里(这是马克的叉子)。请注意，现在轴对齐在图表的中心，因为中心点完全在0,0。
https://stackoverflow.com/questions/29236117
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号