Невозможно установить X и Y, показывая значения NaN при добавлении нового узла?

Question

Я новичок в 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

Я уже пробовал решение из этих источников -

1. http://bl.ocks.org/emeeks/2432083
2. При использовании принудительно-ориентированного графа D3 при добавлении новых узлов значения x & y будут равны NaN
3. Значения NaN x и y в узлах компоновки пакетов с использованием d3.js

и многие другие источники.

Большое спасибо за ваше время и помощь.