D3JS - Могу ли я сделать форсированный граф с отдельными узлами и как?

Вопрос: Возможно ли, чтобы я сделал каждый узел по отдельности, а затем применил силовой макет для их подключения? Если нет, то как я буду делать предварительную установку узлов? И если да, могу ли я получить некоторую помощь в синтаксисе, пожалуйста?

Контекст: я новичок в D3, и я пытаюсь сделать ориентированный на силу граф только для пяти узлов как часть целевой страницы для академического проекта. Я использую этот пример и этот пример, и вроде хочу сделать комбинацию из двух, поместив мои узлы в массивы.

Например, могу ли я сделать что-то вроде:

        var w = 1300;
        var h = 10000;
        //An area for svg elements
        var svgArea = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", h);

        //All the node definitions
        var nodeMain = svgArea.append("a")
            .attr("height", 300)
            .attr("width", 300)
            .append("circle")
            .attr("r", 300)
            .attr("cx", 650)
            .attr("cy", 700)
            .attr("fill", "orange");

        var nodeMedia = svgArea.append("a")
            .attr("height", 200)
            .attr("width", 200)
            .append("circle")
            .attr("r", 200)
            .attr("cx", 250)
            .attr("cy", 1150)
            .attr("fill", "orange");

        var nodeRef = svgArea.append("a")
            .attr("height", 200)
            .attr("width", 200)
            .append("circle")
            .attr("r", 200)
            .attr("cx", 1050)
            .attr("cy", 1150)
            .attr("fill", "orange");

        //Nodes for the visualization
        var nodes = [nodeMain, nodeMedia, nodeRef];

        //Connected using indices of the array
        var edges = [{source: 1, target: 0}, {source: 2, target: 0}];

        //Force-directed
        var connect = d3.layout.force()
            .size([w, h])
            .gravity(1)             
            .distance(100)
            .charge(-50);

        connect.nodes(nodes).links(edges);

        var orb = svgArea.selectAll(".node").data(nodes)
            .enter().append("g")    
            .call(force.drag);


        var link = svgArea.selectAll(".link").data(edges)
            .enter()
            .append("line")
            .attr("class", "link");

        connect.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.source.x})
                .attr("y2", function(d) {return d.source.y});

            orb.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")";});
        });

        connect.start();

(И в случае, если я задал действительно глупый вопрос, кто-нибудь возражал бы, направляя меня к некоторым ресурсам D3, где я могу узнать больше о концепциях/синтаксисе, не подражая/полагаясь исключительно на примеры?)

Спасибо заранее, всем!