Я новичок в D3 и работаю над проектом, пытаюсь добавить новые узлы в мой график для события mousedown, но проблема в том, что я получаю X и Y как NaN для этих новых узлов. Данные, которые я получаю, взяты из базовой программы visaul и не позволяют загружать JSON напрямую.
Данные предоставлены мне в формате .js, и для загрузки требуется использовать библиотеку. У меня очень короткий сценарий моей проблемы.
<script src="firstloaddata.js"></script>
<script src="resources/d3.v3.min.js"></script>
<script src="resources/Require/require.js"></script>
<script>
var nodes = {};
var nodes_current = {};
var width = screen.width - 50;
var height = 900;
var links = links_current;
var nominal_text_size = 12;
var link_distance = 100;
processnodes();
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(link_distance)
.charge(-1700)
.friction(0.9);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
var nodes = force.nodes(),
links = force.links();
force.on("tick", function() {
svg.selectAll(" line.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;
})
.attr("stroke-width", function(d) {
return (d.relCol != "grey") ? 3 : 1.5;
})
.attr("stroke", function(d) {
return d.relCol;
});
svg.selectAll("g.node")
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
function processnodes(){
// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {
id: link.source,
caption: link.sCaption,
});
link.target = nodes[link.target] || (nodes[link.target] = {
id: link.target,
caption: link.tCaption,
});
});
}
function restart() {
var link = svg.selectAll("line.link");
link = link.data(links);
link.enter().append("line")
.style("stroke-width", 2.5)
.attr("stroke", "red")
.attr("class", "link")
.attr("xID", links.source);
link.exit()
.remove();
var node = svg.selectAll("g.node");
node = node.data(nodes);
node.enter().append("g")
.attr("class", "node")
.call(force.drag)
.on("mousedown", mousedownNode);
node.append("svg:circle")
.attr("class", "circle")
.attr("r", 8);
node.append("text")
.style("font-size", nominal_text_size)
.attr("dy", ".35em")
.attr("x", "1.5em")
.text(function(d) {
return d.caption;
});
node.exit()
.remove();
force.start();
}
function mousedownNode(){
requirejs(['newdata.js?_r=' + Math.random()], function() {
// Adding links to our already list
links_current.forEach(function(link) {
link.source = nodes_current[link.source] || (nodes_current[link.source] = {
id: link.source,
caption: link.sCaption
});
link.target = nodes_current[link.target] || (nodes_current[link.target] = {
id: link.target,
caption: link.tCaption
});
});
for (i in links_current){
links.push(links_current[i]);
}
// Added nodes to our list
nodes_id = [];
for (i in nodes){
nodes_id.push(nodes[i].id);
}
for (j in nodes_current){
if(!nodes_id.includes(nodes_current[j].id)){
nodes.push(nodes_current[j]);
}
}
restart();
});
}
restart();
</script>
Вот два файла JS, которые я пытаюсь загрузить -
firstloaddata.js
var links_current = [
{
source: "1",
sCaption: "A",
target: "2",
tCaption: "B"
},
{
source: "2",
sCaption: "B",
target: "3",
tCaption: "C"
}
];
newdata.js
var links_current = [
{
source: "2",
sCaption: "B",
target: "3",
tCaption: "C"
},
{
source: "2",
sCaption: "B",
target: "4",
tCaption: "D"
}
];
Вот скриншот ошибки от chrome -
Error_NaN
Я уже пробовал решение из этих источников -
- http://bl.ocks.org/emeeks/2432083
- При использовании принудительно-ориентированного графа D3 при добавлении новых узлов значения x & y будут равны NaN
- Значения NaN x и y в узлах компоновки пакетов с использованием d3.js
и многие другие источники.
Большое спасибо за ваше время и помощь.