如何在MAMP本地服务器上运行D3JavaScript
我正在尝试运行这两个文件,用于在d3 Javascript库中可视化图形:如何在MAMP本地服务器上运行D3JavaScript,javascript,json,apache,d3.js,mamp,Javascript,Json,Apache,D3.js,Mamp,我正在尝试运行这两个文件,用于在d3 Javascript库中可视化图形: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stro
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
<body>
<p> I am there </p>
<script src="d3.v3.js"></script>
<script src="d3.v3.min.js"></script>
<script>
var width = 960,
height = 500;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("miserables.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", function(d) { return Math.sqrt(d.value); });
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function(d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function(d) { return d.name; });
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; });
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
});
</script>
</body>
</html>
我已经安装了MAMP for mac 10.5.8来运行这两个文件。在我的系统中MAMP所在的文件夹中,有一个名为
htdocs
的文件夹。我在htdocs
中创建了一个文件夹,并将其命名为:sample
并将这两个文件添加到sample
中。我还添加了文件:d3.v3.js
和d3.v3.min.js
。启动MAMP本地服务器后,我将其插入Web浏览器http://localhost:8888/sample/
。不幸的是,图形没有显示。我认为读取json文件:miserables.json
或javascript文件:d3.v3.js
都有问题。谁能帮我解决这个问题,因为我不知道为什么不显示图表。非常感谢你的帮助 d3库中的XHR很可能会遇到CORS问题,需要外部资源来解析JSON数据
本地运行d3的一个解决方案是丢失MAMP,而是使用JSONP和Express/Node.js以及jQuery函数来启动JSON的客户端请求,而不是使用d3函数的原始包装器
Had必须删除原始的d3.json包装,并用请求中的数据填充邻接图。从克隆或下载开始,然后使用node server.js
启动服务器。当然,您需要全局安装Node.js,从节点打包模块(npm)开始。将程序复制到子目录中
下面是我为共现矩阵修改的代码。我将整个脚本移动到$.getJSON
中,并删除了d3.json
函数
<script>
$.getJSON("http://localhost:8080/data?callback=?", function(result){
miserables = result;
var margin = {
top: 80,
right: 0,
bottom: 10,
left: 80
},
width = 720,
height = 720;
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 4]).clamp(true),
c = d3.scale.category10().domain(d3.range(10));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
// Compute index per node.
nodes.forEach(function(node, i) {
node.index = i;
node.count = 0;
matrix[i] = d3.range(n).map(function(j) {
return {
x: j,
y: i,
z: 0
};
});
});
// Convert links to matrix; count character occurrences.
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
// Precompute the orders.
var orders = {
name: d3.range(n).sort(function(a, b) {
return d3.ascending(nodes[a].name, nodes[b].name);
}),
count: d3.range(n).sort(function(a, b) {
return nodes[b].count - nodes[a].count;
}),
group: d3.range(n).sort(function(a, b) {
return nodes[b].group - nodes[a].group;
})
};
// The default sort order.
x.domain(orders.name);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) {
return "translate(0," + x(i) + ")";
})
.each(row);
row.append("line")
.attr("x2", width);
row.append("text")
.attr("x", -6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) {
return nodes[i].name;
});
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) {
return "translate(" + x(i) + ")rotate(-90)";
});
column.append("line")
.attr("x1", -width);
column.append("text")
.attr("x", 6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i) {
return nodes[i].name;
});
function row(row) {
var cell = d3.select(this).selectAll(".cell")
.data(row.filter(function(d) {
return d.z;
}))
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d) {
return x(d.x);
})
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.style("fill-opacity", function(d) {
return z(d.z);
})
.style("fill", function(d) {
return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null;
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);
}
function mouseover(p) {
d3.selectAll(".row text").classed("active", function(d, i) {
return i == p.y;
});
d3.selectAll(".column text").classed("active", function(d, i) {
return i == p.x;
});
}
function mouseout() {
d3.selectAll("text").classed("active", false);
}
d3.select("#order").on("change", function() {
clearTimeout(timeout);
order(this.value);
});
function order(value) {
x.domain(orders[value]);
var t = svg.transition().duration(2500);
t.selectAll(".row")
.delay(function(d, i) {
return x(i) * 4;
})
.attr("transform", function(d, i) {
return "translate(0," + x(i) + ")";
})
.selectAll(".cell")
.delay(function(d) {
return x(d.x) * 4;
})
.attr("x", function(d) {
return x(d.x);
});
t.selectAll(".column")
.delay(function(d, i) {
return x(i) * 4;
})
.attr("transform", function(d, i) {
return "translate(" + x(i) + ")rotate(-90)";
});
}
var timeout = setTimeout(function() {
order("group");
d3.select("#order").property("selectedIndex", 2).node().focus();
}, 5000);
});
</script>
$.getJSON(“http://localhost:8080/data?callback=?,函数(结果){
悲惨=结果;
var保证金={
排名:80,
右:0,,
底部:10,
左:80
},
宽度=720,
高度=720;
var x=d3.scale.ordinal().rangeBands([0,宽度]),
z=d3.scale.linear(),
c=d3.scale.category10().domain(d3.range(10));
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.style(“左边距”、-margin.left+“px”)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
var矩阵=[],
节点=可怜虫。节点,
n=节点长度;
//计算每个节点的索引。
forEach(函数(node,i){
node.index=i;
node.count=0;
矩阵[i]=d3.范围(n).映射(函数(j){
返回{
x:j,
y:我,
z:0
};
});
});
//将链接转换为矩阵;计算字符出现次数。
悲惨世界。链接。forEach(函数(链接){
矩阵[link.source][link.target].z+=link.value;
矩阵[link.target][link.source].z+=link.value;
矩阵[link.source][link.source].z+=link.value;
矩阵[link.target][link.target].z+=link.value;
节点[link.source].count+=link.value;
节点[link.target].count+=link.value;
});
//预先计算订单。
风险值订单={
名称:d3.范围(n).排序(函数(a,b){
返回d3.ascending(节点[a].name,节点[b].name);
}),
计数:d3.范围(n).排序(函数(a,b){
返回节点[b]。计数-节点[a]。计数;
}),
组:d3.范围(n).排序(函数(a,b){
返回节点[b]。组-节点[a]。组;
})
};
//默认的排序顺序。
x、 域名(orders.name);
svg.append(“rect”)
.attr(“类别”、“背景”)
.attr(“宽度”,宽度)
.attr(“高度”,高度);
var row=svg.selectAll(“.row”)
.数据(矩阵)
.enter().append(“g”)
.attr(“类”、“行”)
.attr(“转换”,函数(d,i){
返回“translate(0),+x(i)+”);
})
.每排;
行。追加(“行”)
.attr(“x2”,宽度);
行。追加(“文本”)
.attr(“x”,-6)
.attr(“y”,x.rangeBand()/2)
.attr(“dy”,“.32em”)
.attr(“文本锚定”、“结束”)
.文本(功能(d,i){
返回节点[i]。名称;
});
var column=svg.selectAll(“.column”)
.数据(矩阵)
.enter().append(“g”)
.attr(“类”、“列”)
.attr(“转换”,函数(d,i){
返回“平移(“+x(i)+”)旋转(-90)”;
});
列。追加(“行”)
.attr(“x1”,宽度);
列。追加(“文本”)
.attr(“x”,6)
.attr(“y”,x.rangeBand()/2)
.attr(“dy”,“.32em”)
.attr(“文本锚定”、“开始”)
.文本(功能(d,i){
返回节点[i]。名称;
});
功能行(行){
var cell=d3.选择(此).selectAll(“.cell”)
.数据(行)过滤器(函数(d){
返回d.z;
}))
.enter().append(“rect”)
.attr(“类”、“单元”)
.attr(“x”,函数(d){
返回x(d.x);
})
.attr(“宽度”,x.rangeBand())
.attr(“高度”,x.rangeBand())
.样式(“填充不透明度”,函数(d){
返回z(d.z);
})
.样式(“填充”,功能(d){
返回节点[d.x]。组==节点[d.y]。组?c(节点[d.x]。组):null;
})
.on(“鼠标悬停”,鼠标悬停)
.on(“mouseout”,mouseout);
}
功能鼠标盖(p){
d3.选择所有(“.row text”).class
<script>
$.getJSON("http://localhost:8080/data?callback=?", function(result){
miserables = result;
var margin = {
top: 80,
right: 0,
bottom: 10,
left: 80
},
width = 720,
height = 720;
var x = d3.scale.ordinal().rangeBands([0, width]),
z = d3.scale.linear().domain([0, 4]).clamp(true),
c = d3.scale.category10().domain(d3.range(10));
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.style("margin-left", -margin.left + "px")
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var matrix = [],
nodes = miserables.nodes,
n = nodes.length;
// Compute index per node.
nodes.forEach(function(node, i) {
node.index = i;
node.count = 0;
matrix[i] = d3.range(n).map(function(j) {
return {
x: j,
y: i,
z: 0
};
});
});
// Convert links to matrix; count character occurrences.
miserables.links.forEach(function(link) {
matrix[link.source][link.target].z += link.value;
matrix[link.target][link.source].z += link.value;
matrix[link.source][link.source].z += link.value;
matrix[link.target][link.target].z += link.value;
nodes[link.source].count += link.value;
nodes[link.target].count += link.value;
});
// Precompute the orders.
var orders = {
name: d3.range(n).sort(function(a, b) {
return d3.ascending(nodes[a].name, nodes[b].name);
}),
count: d3.range(n).sort(function(a, b) {
return nodes[b].count - nodes[a].count;
}),
group: d3.range(n).sort(function(a, b) {
return nodes[b].group - nodes[a].group;
})
};
// The default sort order.
x.domain(orders.name);
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height);
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) {
return "translate(0," + x(i) + ")";
})
.each(row);
row.append("line")
.attr("x2", width);
row.append("text")
.attr("x", -6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) {
return nodes[i].name;
});
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) {
return "translate(" + x(i) + ")rotate(-90)";
});
column.append("line")
.attr("x1", -width);
column.append("text")
.attr("x", 6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i) {
return nodes[i].name;
});
function row(row) {
var cell = d3.select(this).selectAll(".cell")
.data(row.filter(function(d) {
return d.z;
}))
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d) {
return x(d.x);
})
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.style("fill-opacity", function(d) {
return z(d.z);
})
.style("fill", function(d) {
return nodes[d.x].group == nodes[d.y].group ? c(nodes[d.x].group) : null;
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);
}
function mouseover(p) {
d3.selectAll(".row text").classed("active", function(d, i) {
return i == p.y;
});
d3.selectAll(".column text").classed("active", function(d, i) {
return i == p.x;
});
}
function mouseout() {
d3.selectAll("text").classed("active", false);
}
d3.select("#order").on("change", function() {
clearTimeout(timeout);
order(this.value);
});
function order(value) {
x.domain(orders[value]);
var t = svg.transition().duration(2500);
t.selectAll(".row")
.delay(function(d, i) {
return x(i) * 4;
})
.attr("transform", function(d, i) {
return "translate(0," + x(i) + ")";
})
.selectAll(".cell")
.delay(function(d) {
return x(d.x) * 4;
})
.attr("x", function(d) {
return x(d.x);
});
t.selectAll(".column")
.delay(function(d, i) {
return x(i) * 4;
})
.attr("transform", function(d, i) {
return "translate(" + x(i) + ")rotate(-90)";
});
}
var timeout = setTimeout(function() {
order("group");
d3.select("#order").property("selectedIndex", 2).node().focus();
}, 5000);
});
</script>