如何将json从文件加载到D3api
How to load a json from a file to the D3 api
我想将json从静态文件加载到D3 api.在我的api中，数据在api的代码中，但在我的应用程序中，我需要将数据从statcic文件加载到api。我正在努力做这件事，但我做不到。。。这是我的代码
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
/* CSS Document */
.link10 {
stroke: #000;
stroke-width: 2px;
}
.link1 {
stroke: #000;
stroke-width: 2px;
}
.nodetext {
pointer-events: none;
}
.node.type1 {
fill: #800000;
}
.node.type4 {
fill: #000000;
stroke: #1695A3;
stroke-width: 3px;
}
.node.type5 {
fill: #0000A0;
size: 20px;
}
.node.type7 {
fill: #008000;
size: 40px;
}
image.circle {
cursor: pointer;
}
.fadein {
display: none;
font-size: 20px;
}
.rectD {
background-color: #000000;
width: 70px;
height: 30px
}
.rectL {
background-color: #000000;
width: 90px;
height: 30px
}
</style>
<script src="http://d3js.org/d3.v2.js?2.9.1"></script>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
</head>
<body>
<script>
var data = {
"nodes" : [ {
"name" : "JEET",
"full_name" : "Yahoo",
"type" : 4,
"slug" : "www.yahoo.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "SATISH",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "RAHUL",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name": "DANIEL",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "Offnet",
"full_name":"Yandex",
"type":5,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Onnet",
"full_name":"Yandex",
"type":7,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Desc4",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "SHYAM",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "PETER",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "ALEX",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "MURFY",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "JENIFER",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "Subho",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "abc",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "jfyh",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "flid",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "gerard",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "hfud",
"type" : 1,
"slug" : "",
"entity" : "description"
}
],
"links" : [ {
"source" : 0,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 7,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 2,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 3,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 8,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 9,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 10,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 11,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 12,
"value" : 10,
"distance" : 6
}, {
"source" : 4,
"target" : 1,
"value" : 10,
"distance" : 6
},{
"source" : 4,
"target" : 13,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 14,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 15,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 16,
"value" : 10,
"distance" : 6
},
{
"source" : 4,
"target" : 17,
"value" : 10,
"distance" : 6
}
]
};
var w = 560, h = 500, radius = d3.scale.log().domain([0,312000 ])
.range([ "10", "50" ]);
var vis = d3.select("body").append("svg:svg").attr("width", w).attr(
"height", h);
vis.append("marker")
.attr("id", "arrowhead")
.attr("refX", 6 + 2) /*must be smarter way to calculate shift*/
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 4)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
//d3.json(data, function(json) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function(d) {
return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([ w, h ]).start();
var link = vis.selectAll("line.link").data(data.links).enter().append(
"svg:line").attr("class", function(d) {
return "link" + d.value + "";
}).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;
}).attr("marker-end", function(d) {
if (d.value == 10 || d.value==1) {
return "url(#arrowhead)"
} else {
return " "
}
;
});
function openLink() {
return function(d) {
var url = "";
if (d.slug != "") {
url = d.slug
} else if(d.type == 2) {
url = "clients/" + d.slug
} else if(d.type == 3) {
url = "agencies/" + d.slug
}
window.open("//" + url)
}
}
var node = vis.selectAll("g.node").data(data.nodes).enter().append(
"svg:g").attr("class", "node").call(force.drag);
node.append("circle").attr("class", function(d) {
return "node type" + d.type
}).attr("r", function(d) {
if (d.entity == "description") {
return 10
} else {
return 18
}
})
node.append("text").attr("class", function(d) {
return "nodetext title_" + d.name
}).attr("dx", 0).attr("dy", ".35em").style("font-size", "10px").attr(
"text-anchor", "middle").style("fill", "white").text(
function(d) {
if (d.entity != "description") {
return d.name
}
});
node.on("mouseover", function(d) {
if (d.entity == "description") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.name;
}).style("font-size", "15px")
} else if (d.entity == "employee") {
var asdf = d3.select(this);
asdf.select('text').remove();
asdf.append("text").text(function(d) {
return d.prefix + ' ' + d.fst_name
}).attr("class", "nodetext").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
asdf.append("text").text(function(d) {
return d.snd_name
}).attr("class", "nodetext").attr("transform",
"translate(0, 12)").attr("dx", 0).attr("dy", ".35em")
.style("font-size", "5px")
.attr("text-anchor", "middle").style("fill", "white")
.transition().duration(300).style("font-size", "12px");
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "15px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "90px").attr("x",
"-46px").attr("y", "-36.5px").attr("xlink:href",
function(d) {
return d.img_hrefL
});
}
if (d.entity == "company") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 28)
} else if (d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 15)
}
});
node.on("mouseout", function(d) {
if (d.entity == "company") {
d3.select(this).select('text').transition().duration(300).text(
function(d) {
return d.name;
}).style("font-size", "10px")
} else if (d.entity == "employee") {
///////////////////////////
// CHANGE
///////////////////////////
d3.select(this).selectAll('text').remove();
//d3.select(this).select('text')
d3.select(this).append('text').text(function(d) {
return d.name;
}).style("font-size", "14px").attr("dx", 0).attr("dy", ".35em")
.attr("text-anchor", "middle").style("fill", "white")
.attr("class", "nodetext").transition().duration(300)
.style("font-size", "10px")
} else {
d3.select(this).select('text').transition().duration(300)
.style("font-size", "10px")
}
if (d.entity == "company") {
d3.select(this).select('image').attr("width", "70px").attr("x",
"-36px").attr("y", "-36px").attr("xlink:href",
function(d) {
return d.img_hrefD
});
}
if (d.entity == "company" || d.entity == "employee") {
d3.select(this).select('circle').transition().duration(300)
.attr("r", 18)
}
});
node.on("mouseover", fade(.4, "red")).on("mouseout", fade(1));
var linkedByIndex = {};
data.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index]
|| linkedByIndex[b.index + "," + a.index]
|| a.index == b.index;
}
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("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function getConnected(cn, d, level) {
node.each(function(o) {
if(isConnected(d, o) && cn.indexOf(o) == -1) {
cn.push(o);
if(level > 0) getConnected(cn, o, level-1);
};
});
return cn;
}
function fade(opacity,color) {
return function(d) {
node.style("stroke-opacity", function(o) {
thisOpacity = isConnected(d, o) ? 1 : opacity;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.style("stroke-opacity", function(o) {
return o.source === d || o.target === d ? 1 : opacity;
})
.style("stroke", function(o) {
return o.source === d || o.target === d ? color : "#000" ;
});
};
}
//});
</script>
</body>
这是原始的api，可以很好地进行
我就这样变了。。
d3.json("Link.json", function(error,data) {
var force = self.force = d3.layout.force().nodes(data.nodes).links(
data.links).linkDistance(function(d) {
return (d.distance * 10);
})
//.friction(0.5)
.charge(-250).size([ w, h ]).start();
这是我想从中加载数据的静态文件
/*
*要更改此模板，请选择"工具"|"模板"*并在编辑器中打开模板。*/｛
"nodes" : [ {
"name" : "JEET",
"full_name" : "Yahoo",
"type" : 4,
"slug" : "www.yahoo.com",
"entity" : "company",
"img_hrefD" : "",
"img_hrefL" : ""
}, {
"name" : "SATISH",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "RAHUL",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name": "DANIEL",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "Offnet",
"full_name":"Yandex",
"type":5,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Onnet",
"full_name":"Yandex",
"type":7,
"slug":"www.yandex.com",
"entity":"company",
"img_hrefD":"",
"img_hrefL":""
}, {
"name" : "Desc4",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "SHYAM",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "PETER",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "ALEX",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "MURFY",
"type" : 1,
"slug" : "",
"entity" : "description"
}, {
"name" : "JENIFER",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "Subho",
"type" : 1,
"slug" : "",
"entity" : "description"
},{
"name" : "abc",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "jfyh",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "flid",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "gerard",
"type" : 1,
"slug" : "",
"entity" : "description"
},
{
"name" : "hfud",
"type" : 1,
"slug" : "",
"entity" : "description"
}
],
"links" : [ {
"source" : 0,
"target" : 4,
"value" : 1,
"distance" : 5
}, {
"source" : 0,
"target" : 5,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 6,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 7,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 2,
"value" : 1,
"distance" : 5
}, {
"source" : 4,
"target" : 3,
"value" : 1,
"distance" : 5
},
{
"source" : 5,
"target" : 8,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 9,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 10,
"value" : 10,
"distance" : 6
}, {
"source" : 5,
"target" : 11,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 12,
"value" : 10,
"distance" : 6
}, {
"source" : 4,
"target" : 1,
"value" : 10,
"distance" : 6
},{
"source" : 4,
"target" : 13,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 14,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 15,
"value" : 10,
"distance" : 6
},
{
"source" : 5,
"target" : 16,
"value" : 10,
"distance" : 6
},
{
"source" : 4,
"target" : 17,
"value" : 10,
"distance" :6
}
]
}
您需要设置回调函数来加载json文件（d3.json("path_to_file.json", function (error, dataset) { // your code here });），并在其中放入使用json 中包含的数据的其他代码
相关文章：
- 如何使用url加载程序在webpack中导入多个图像
- 如何在生成下载文件时显示加载动画
- 有没有任何方法可以将控制器从文件加载到ui路由器$stateProvider中
- 无法在通过jQuery的ajax加载的页面中执行javascript
- Emberjs应用程序加载在除Index之外的所有路由上
- 在chrome.tabs.onCreated之后加载HTML页面
- 单击F5时如何停止页面加载
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 跟踪在页面加载时应用内联样式的JavaScript
- 在使用Polymer'加载所有json文件后执行方法;s的核心ajax
- jQuery Lazy加载动画滚动
- Html页面上的多个Base64图像和平滑加载
- 如何创建带有插槽的vue js组件预加载程序
- Webpack/Rect:遵循egghead.io教程，但出现错误:您可能需要一个合适的加载程序来处理此文件类型
- 如何使该数据在所有元素中加载
- Chrome扩展没有't在重新加载之前考虑期权价值
- 使用javascript在Flash中加载外部图像
- Ajax文件加载和<输入>文件加载
- 使用javascript函数在页面初始化后加载jquery
- 如何将json从文件加载到D3api
