Chrome不运行我的D3.js,但它在safari中工作良好
Chrome not running my D3.js, but it is working fine in safari
我对D3.js有点陌生。Chrome没有运行我的D3.js,但它在safari中工作良好。我的代码在这里有什么问题?请协助
这是由于一些权限问题,其中Chrome不允许XMLHttpRequest (d3。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
Show: <select id="graph">
<option value="init">Before topic identification</option>
<option value="final">After topic identification</option>
</select>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
height = 1000;
var color = d3.scale.category20();
var force = d3.layout.force()
.friction(0.99)
.charge(-120)
.linkDistance(100)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("cluster.json", function(error, graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", 0);
var gnodes = svg.selectAll("g.gnode")
.data(graph.nodes)
.enter()
.append('g')
.classed('gnode', true);
// Add one circle in each group
var node = gnodes.append("circle")
.attr("class", "node")
.attr("r", function(d) { return d.initValue*2; })
.style("fill", color(0))
.style("fill-opacity", function(d) { return (d.type=="term") ? 0 : 0.75; })
.call(force.drag);
// Append the labels to each group
var labels = gnodes.append("text")
.style("opacity", function(d) {return d.initValue*2; })
.attr("dy", ".3em")
.style("text-anchor", "middle")
.style("font-size", function(d) {return 24+"px"; })
.text(function(d) { return d.name; })
.on("mouseover", function(d, i) {
d3.select(this)
.transition()
.duration(200)
.style('font-size', function(d) { return 45 })
.style("opacity", 1)
.style('fill', "red");
d3.select(this).moveToFront();
})
.on("mouseout", function(d, i) {
d3.select(this)
.transition()
.duration(200)
.style('font-size', function(d) { return 24 })
.style("opacity", function(d) {return d.initValue*2; })
.style('fill', "black");
});
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
// Translate the groups
gnodes.attr("transform", function(d) {
return 'translate(' + [d.x, d.y] + ')';
});
});
d3.select("#graph").on("change", function() {
// Compute index per node.
var thisValue = this.value;
node.attr("r", function(d) { return (thisValue=="init") ? d.initValue*2 : ((d.type=="term") ? 50 : d.finalValue*2); });
node.style("fill", function(d) { return (thisValue=="init") ? color(0) : color(d.group); });
link.style("stroke-width", function(d) { return (thisValue=="init") ? 0 : 1; });
force.linkDistance( function(d) { return ((thisValue=="init") ? d.initValue : d.finalValue*20); });
force.start();
});
});
</script>
cluster.json
有时你无法在Chrome中加载本地文件d3.json。但是你可以使用jquery。获取,像这样:
$.get( "cluster.json", function( data ) {
//你的代码在这里});
PS:最好使用$。延迟,在你的代码中解决。
但是我猜,你用错了cluster.json。你能提供吗?
您需要在一些本地服务器上运行您的代码。像
localhost:8080
如果你安装了Wamp或任何php服务器,只需将你的代码复制到www根目录下,然后从phpMyAdmin
运行它如果你安装了python,打开命令提示符,进入该目录,并为
输入以下命令 python -m SimpleHTTPServer 8000
,您将能够在该目录下运行本地服务器
相关文章:
- jQuery Datepicker可以在Safari中工作,但不能在FF或Chrome中工作
- 为什么我的JavaScript在Safari上的严格模式下不能正常工作
- jQuery$.post可以在chrome、safari中工作,但不能在FF中工作(声明成功回调函数未定义)
- 异步加载的SVG过滤器feColorMatrix在Chrome中工作,而不是在Safari或Firefox中
- RGB 到 HEX JavaScript 函数在 Chrome 中工作,但不能在 Firefox 或 Safari 中工
- setInterval 或 window.location 在 Opera、IE 和 Safari 中无法正常工作
- window.onbeforeunload在IE8中不触发(在Firefox,Chrome和Safari中工作正常)
- toLocaleString()不会'无法在Safari浏览器中工作
- 动画HTML5横幅工作在除Safari以外的一切
- Date.prototype.get日期;不能在Safari中工作
- jQuery UI手风琴无法在本地目录的Safari中工作
- html+css+js组合在Google Chrome或Safari浏览器中无法正常工作
- window.open()没有'无法在添加到主屏幕的移动Safari web应用程序中工作
- webkitAudioContext在iOS Safari上创建MediaElementSource不工作
- JQuery图像大小计算没有'不能在Chrome/Safari中工作
- JavaScript倒计时;不能在Safari中工作
- style.display无法在Chrome、Safari-Firefox、IE11中正常工作
- 为什么这个html5音频不能在chrome上工作,但在safari上工作得很好
- 复选框事件处理程序抛出错误的点击事件在chrome浏览器,safari工作良好的键盘事件
- document.referrer不在safari工作