D3.js和坐标系
D3.js and coordinate system
正在尝试D3,但出现了一些问题。不确定什么是忍受坐标系的最佳方式。请在下面找到来源。
编辑:点击此处
-
我用
yScale -> .range([ height - padding, padding]);
代替.range([ padding - height - padding]);
来模拟倒坐标。这是最好的方式吗。如果svg中的所有对象都需要正确定向,那么最好应用于最外层的元素吗?var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g") <--- -
较大的矩形({"X":100,"Y":100、"W":40、"H":40})在轴外。所以,我做错了什么。
任何有助于使该图包含在轴内,并具有适当的缩放和方向的帮助都将不胜感激。
索引.html
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<script type="text/javascript" src="d3.v2.min.js"></script>
<link type="text/css" rel="stylesheet" href="style.css"/>
</head>
<body>
<div id="chart"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
Script.js
var margin = {top: 10, right: 20, bottom: 20, left: 10},
width = 960 - margin.right - margin.left,
height = 480 - margin.top - margin.bottom
padding = 40;
var data = [
{"X":10, "Y": 10, "W":10, "H": 10},
{"X":100, "Y": 100, "W":40, "H": 40}
]
var xScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.X; })])
.range([padding, width - padding]),
yScale = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.Y; })])
.range([ height - padding, padding]);
var xAxis = d3.svg.axis().scale(xScale).orient("bottom"),
yAxis = d3.svg.axis().scale(yScale).orient("left");
var svg = d3.select("#chart").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate("
+ margin.left + ","
+ margin.top + ")");
svg.selectAll("rect")
.data(data)
.enter().append("rect")
.attr("x", function(d) { return xScale(d.X); })
.attr("y", function (d) { return yScale(d.Y); })
.attr("width", function (d) { return (d.W); })
.attr("height", function (d) { return (d.H); })
//Create X axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + (height - padding) + ")")
.call(xAxis);
//Create Y axis
svg.append("g")
.attr("class", "axis")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis);
Re 1.:是的,这是最好的方法。
还要注意的是,当你"翻转"这样的缩放比例,然后向其中输入宽度时,D3不会保存你的培根,这将是负面的:当将这些用于SVG高度属性时,这些属性将被标记为非法的SVG内容,浏览器将弹出一个发球(不显示你想要的)。
Re2.:一旦你纠正了你的负宽度/高度,那么你就可以通过将你的s包裹在一个剪切矩形中来防止"在区域外绘图";这可以通过将它们放在一个单独的组中来完成,然后为该组分配一个与输出区域匹配的剪裁矩形。
对于#1,请参阅邮件列表中的问题回复:
http://bl.ocks.org/3671490
修复了所有错误并显示了正确的rect。
样式问题:当您通过对xScale/yScale的一次调用转换宽度和高度时,您的代码将只使用线性轴,而不是首先计算域空间中的绝对坐标,然后通过缩放转换两者以计算输出空间中的宽度/高度。为了证明新方法也适用于日志空间,下面是使用log/log比例的上述要点的副本:
http://bl.ocks.org/3671592
代码是"粗略的",因为所有的计算都是显式完成的,并且没有"不变量"被移动到.attr()调用之外:x1/y1/x2/y2被计算多次,因为每个.attr)需要两次。这类问题通常通过在将数据输入d3.selection.data()之前设置数据(预先计算/排序/交换/所需的任何内容)来"解决"。
经验教训:在使用SVG时,您需要做更多的工作才能完全与规模无关;如果您想要更快的代码,则需要准备数据,以便输出将生成有效的SVG(此处:"已处理"输入=[{X:80,Y:80,W:10,H:-60]]),特别是宽度和高度的正值(或者类似地x2>x1和y2>y1)
- 可以't让我的if语句处理js中的html表单输入
- 使用agility.js进行页面布局和合成
- 使用Clipboard.js复制span文本
- 使用JS如何动态更改显示的html文件中的文本背景颜色
- 强制模板刷新ember.js
- 如何编写HTML输入的JS内联
- Angular JS IE9 Hashbang url rewriting
- 使用JS将数组转换为json对象
- Node.js v6.2.0类扩展不是函数错误
- 当js函数's已执行
- 要求未定义JS回调参数
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- 无法在数据endVal中设置值=“”;{{ucount}}”;使用Angular JS的CountUp
- 如何从Java/scala调用js美化程序
- 如何更改<svg>标记为<img>用js标记
- 如何使用 node.js 比较两个 json 数组
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- 节点Js:How to catch a“;没有这样的文件或目录“;读取线模块出错
- D3.js和坐标系
- 如何同步三.js和 HTML/SVG 坐标系(尤其是 y 轴)