Javascript 如何将JSON数据传递到d3.js并仅获取新图形
使用d3.js脚本，我试图绘制一个图表。 有一个名为Updatedatadata的函数，我为参数传递JSON字符串。 它工作得很好。 然而，我有一个问题。 每次我运行Updatedata函数时，都会创建另一个diagramgraph，所以最后我会看到很多相同的图形。 我想我应该修改代码，只使用新传递的数据刷新图形 JSON 你能告诉我怎么做吗Javascript 如何将JSON数据传递到d3.js并仅获取新图形,javascript,json,d3.js,Javascript,Json,D3.js,使用d3.js脚本，我试图绘制一个图表。 有一个名为Updatedatadata的函数，我为参数传递JSON字符串。 它工作得很好。 然而，我有一个问题。 每次我运行Updatedata函数时，都会创建另一个diagramgraph，所以最后我会看到很多相同的图形。 我想我应该修改代码，只使用新传递的数据刷新图形 JSON 你能告诉我怎么做吗 <!DOCTYPE html> <html lang="en"> <head> <meta charse
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tree</title>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body bgcolor="#212121">
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// *********** Convert flat data into a nice tree ***************
// create a name: node map
function updateData(data) {
//var data = [
// { "name" : "Level 2: A", "parent":"Top Level" },
// { "name" : "Top Level", "parent":"null" },
// { "name" : "Son of A", "parent":"Level 2: A" },
// { "name" : "Daughter of A", "parent":"Level 2: A" },
// { "name" : "Level 2: B", "parent":"Top Level" }
// ];
//
//
//var data[];
var dataMap = data.reduce(function (map, node) {
map[node.name] = node;
return map;
}, {});
// create the tree array
var treeData = [];
data.forEach(function (node) {
// add to parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
} else {
// parent is null or missing
treeData.push(node);
}
});
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 80
},
width = 400 - margin.right - margin.left,
height = 400 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//d3.json is meant to load data through HTTP. As @Quentin said, you can set up a local server to serve the data over HTTP.
//For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome.
//d3.json("treeData.json", function(error, treeData) {
// root = treeData[0];
// update(root);
//});
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeEnter.append("circle")
.attr("r", 10)
//.style("fill", "#fff");
.style("fill", function (d) {
return d.level;
});
nodeEnter.append("text")
.attr("x", function (d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return d.children || d._children ? "end" : "start";
})
.text(function (d) {
return d.name;
})
.style("fill", "#fff")
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function (d) {
return d.target.id;
});
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.style("stroke", function (d) {
return d.target.level;
})
.attr("d", diagonal);
}
}
</script>
</body>
</html>
与其无条件地附加新的SVG，不如检查是否存在现有的SVG，如果存在，就使用它。谢谢您的评论。无论何时调用updatedata方法，我都希望刷新图表，但现在我只看到许多图表。我对JavaScript非常陌生。你能告诉我这件事吗？非常感谢。我将生成树形图的部分移到了“UpdateData”方法上方。看起来好多了。我再也看不到重复的图表了。实际上，它没有刷新，但至少我只看到了一个图表。是否有方法刷新图表而不是覆盖现有图表？请参阅例如。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tree</title>
<style>
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 3px;
}
.node text { font: 12px sans-serif; }
.link {
fill: none;
stroke: #ccc;
stroke-width: 2px;
}
</style>
</head>
<body bgcolor="#212121">
<!-- load the d3.js library -->
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
// *********** Convert flat data into a nice tree ***************
// create a name: node map
function updateData(data) {
//var data = [
// { "name" : "Level 2: A", "parent":"Top Level" },
// { "name" : "Top Level", "parent":"null" },
// { "name" : "Son of A", "parent":"Level 2: A" },
// { "name" : "Daughter of A", "parent":"Level 2: A" },
// { "name" : "Level 2: B", "parent":"Top Level" }
// ];
//
//
//var data[];
var dataMap = data.reduce(function (map, node) {
map[node.name] = node;
return map;
}, {});
// create the tree array
var treeData = [];
data.forEach(function (node) {
// add to parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
} else {
// parent is null or missing
treeData.push(node);
}
});
// ************** Generate the tree diagram *****************
var margin = {
top: 20,
right: 20,
bottom: 20,
left: 80
},
width = 400 - margin.right - margin.left,
height = 400 - margin.top - margin.bottom;
var i = 0;
var tree = d3.layout.tree()
.size([height, width]);
var diagonal = d3.svg.diagonal()
.projection(function (d) {
return [d.y, d.x];
});
var svg = d3.select("body").append("svg")
.attr("width", width + margin.right + margin.left)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
//d3.json is meant to load data through HTTP. As @Quentin said, you can set up a local server to serve the data over HTTP.
//For development like this I use firefox, it seems to be more permissive when it comes to local cross origin requests than chrome.
//d3.json("treeData.json", function(error, treeData) {
// root = treeData[0];
// update(root);
//});
root = treeData[0];
update(root);
function update(source) {
// Compute the new tree layout.
var nodes = tree.nodes(root).reverse(),
links = tree.links(nodes);
// Normalize for fixed-depth.
nodes.forEach(function (d) {
d.y = d.depth * 180;
});
// Declare the nodes…
var node = svg.selectAll("g.node")
.data(nodes, function (d) {
return d.id || (d.id = ++i);
});
// Enter the nodes.
var nodeEnter = node.enter().append("g")
.attr("class", "node")
.attr("transform", function (d) {
return "translate(" + d.y + "," + d.x + ")";
});
nodeEnter.append("circle")
.attr("r", 10)
//.style("fill", "#fff");
.style("fill", function (d) {
return d.level;
});
nodeEnter.append("text")
.attr("x", function (d) {
return d.children || d._children ? -13 : 13;
})
.attr("dy", ".35em")
.attr("text-anchor", function (d) {
return d.children || d._children ? "end" : "start";
})
.text(function (d) {
return d.name;
})
.style("fill", "#fff")
.style("fill-opacity", 1);
// Declare the links…
var link = svg.selectAll("path.link")
.data(links, function (d) {
return d.target.id;
});
// Enter the links.
link.enter().insert("path", "g")
.attr("class", "link")
.style("stroke", function (d) {
return d.target.level;
})
.attr("d", diagonal);
}
}
</script>
</body>
</html>