将json数据动态加载到D3节点中
Load json data into D3 nodes dynamically
我是javascript/d3新手。我正在尝试将servlet中的json数据解析到javascript页面,然后使用d3-forcelayout设计(http://bl.ocks.org/mbostock/950642)。
我能够读取放在我的项目中的json文件(在下面的星号中突出显示)。然而,我希望用户能够按下一个按钮来更新网络(从java中读取的数据),并直接从我的数据变量加载数据。因此,最初加载页面时不会显示任何网络。
注意:我在retrievedjson()函数和document.getElementById("demo")中收到一个响应。innerHTML将我格式化的json粘贴到页面上。然而,我无法将我的数据变量加载到.nodes和.links中。有人能告诉我如何做到这一点吗?网页上显示的json片段显示在帖子的底部。
请参阅下面的相关HTML代码。
var xmlhttp = new XMLHttpRequest();
var data = "no data";
function loadjson(){
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
retrievedjson(xmlhttp.responseText);
}
}
xmlhttp.open("Get", "/nodenetwork/DemoServlet", true);
xmlhttp.send();
}
function retrievedjson(response) {
alert("got response");
var json = JSON.parse(response);
data = response;
document.getElementById("demo").innerHTML = data;
}
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
*** This works fine when not commented out ** <!--
d3.json("json/data.json", function(error, json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
-->
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.sourceName });
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 + ")"; });
});
});
JSON片段:
{"nodes":[{"sourceName":"Citrix","targets":[]},{"sourceName":"Neon","targets":[]},{"sourceName":"Unknown","targets":[]},{"sourceName":"Clayton","targets":[{"targetSystem":"Citrix","interfaceData":"Frequent 3.4","teams":"H"}]}],
"links":[{"source": 1,"target": 0, "value": 1},{"source": 2,"target": 0, "value": 1},{"source": 2,"target": 1, "value": 1}]}
感谢:)
var xmlhttp = new XMLHttpRequest();
var data = "no data";
function loadjson(){
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
retrievedjson(xmlhttp.responseText);
}
}
xmlhttp.open("Get", "/nodenetwork/DemoServlet", true);
xmlhttp.send();
}
function retrievedjson(response) {
alert("got response");
var json = JSON.parse(response);
data = response;
document.getElementById("demo").innerHTML = data;
}
var width = 960,
height = 500
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var data = {"nodes":[{"sourceName":"Citrix","targets":[]},{"sourceName":"Neon","targets":[]},{"sourceName":"Unknown","targets":[]},{"sourceName":"Clayton","targets":[{"targetSystem":"Citrix","interfaceData":"Frequent 3.4","teams":"H"}]}],
"links":[{"source": 1,"target": 0, "value": 1},{"source": 2,"target": 0, "value": 1},{"source": 2,"target": 1, "value": 1}]};
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
json = data;
//d3.json("json/data.json", function(error, json) {
force
.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.sourceName });
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 + ")"; });
});
//});
.link {
stroke: #ccc;
}
.node text {
pointer-events: none;
font: 10px sans-serif;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
var force = d3.layout.force()
.nodes(data.nodes)
.links(data.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([width, height]);
force.nodes(json.nodes)
.links(json.links)
.start();
var link = svg.selectAll(".link")
.data(json.links)
.enter().append("line")
.attr("class", "link");
var node = svg.selectAll(".node")
.data(json.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
node.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.sourceName });
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 + ")"; });
});
把上面的代码放在一个函数中,将数据(响应)作为参数传递给这个函数,我认为这可能对你有用。。。如果没有,要求更多。
相关文章:
- d3基于用户选择动态更新节点
- 有条件更新d3.js力图中节点的最佳方法
- d3使用链接的节点名称的力图
- 当我在节点上拖动鼠标时,我如何防止使用d3.ehavior.zoom().on(“缩放”,重绘)
- 如何使d3.js树布局按字母顺序对节点进行排序
- D3.js:展开树直到节点n
- 将json数据动态加载到D3节点中
- 尝试从“平面”JSON连接D3节点以制作公司层次结构图
- 如何从 d3 节点层次结构创建 ul-li 列表
- d3:节点+链接,形成多代家谱;如何解析数据以绘制线条
- 如何从d3节点数据中获取dom-svg元素
- 在d3节点上调用if…then函数
- 如何在Chrome扩展内容脚本中获得D3节点的数据
- 从d3节点图中删除链接会打乱标签
- D3节点-工具提示值多行
- 如何在D3节点中放置图像
- D3节点更新-如何在多个文本元素中选择特定的文本元素
- 来自 JSON 的 D3 节点和链接,其中包含嵌套的子数组
- 在拖动D3节点时防止点击动作
- 根据其基准选择d3节点