[英]d3 implementation works on firefox/chrome, but not iPad
所以我有一些使用d3.json通过HTTP get请求获取一些json并将其可视化的源代码...它在chrome和firefox上运行良好,但是当我尝试在safari或chrome的移动版本上运行它时,它坏了。 在iOS野生动物园上运行时,js在遇到空的“ d”对象时会发现空类型错误...
<em><!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="d3.v2.js">
</script>
<link rel="stylesheet" href="style.css" type="text/css">
<link rel="stylesheet" href="syntax.css" type="text/css">
<link rel="stylesheet" href="pack.css" type="text/css">
</head>
<body>
<div id="chart"></div>
<svg width="960" height="960" class="pack">
<script type="text/javascript">
setInterval(function(){
var width = 960,
height = 960,
format = d3.format(",d");
var pack = d3.layout.pack()
.size([width - 4, height -4])
.value(function(d) { return d.size; });
var vis = d3.select("#chart").append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "pack")
.append("g")
.attr("transform", "translate(2, 2)");
d3.json("http://localhost:8080/cluster", function(json) {
//do visualization
var node = vis.data([json]).selectAll("g.node")
.data(pack.nodes)
.enter().append("g")
.attr("class", function(d) {return d.children ? "node" : "leaf node" ;})
.attr("transform", function(d) {return "translate(" + d.x + "," + d.y +")"; });
node.append("title")
.text(function(d) { return d.name + (d.children ? "" : ": " + format(d.size)); });
node.append("circle")
.attr("r", function(d) { return d.r; });
node.filter(function(d) { return !d.children; }).append("text")
.attr("text-anchor", "middle")
.attr("dy", ".3em")
.text(function(d) { return d.name.substring(0, d.r / 3); });
}
);
//log
}, 1000);
</script>
</body>
</html>
</em>
这就是我使用码头设置服务器的方式...
public static void main(String[] args) {
configureLogger();
Server server = new Server(PORT);
ResourceHandler resource_handler = new ResourceHandler();
resource_handler.setDirectoriesListed(true);
resource_handler.setWelcomeFiles(new String[]{ "index.html" });
resource_handler.setResourceBase("src/resources");
ServletHandler handler = new ServletHandler();
handler.addServletWithMapping(VisServlet.class, "/cluster");
HandlerList handlers = new HandlerList();
handlers.setHandlers(new Handler[] { resource_handler, handler, new DefaultHandler() });
server.setHandler(handlers);
try {
server.start();
log.info("Starting server on port " + PORT + "...");
server.join();
} catch (Exception ex){
System.exit(-1);
}
}
您似乎在<script>
标记之前有一行HTML,这会阻止脚本执行。
<svg width="960" height="960" class="pack">
删除它,它应该可以工作(在iOS 5.1上测试)。
请注意,此<svg>
标记缺少其xmlns
命名空间( http://www.w3.org/2000/svg
),因此无论如何都会引起问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.