CODEWITHSUNDEEP
javascriptd3.jsgeometry
Gianmarco
Gianmarco

Reputation: 2552

D3.js adding draggable circles not working when adding single

I am following this example:

https://bl.ocks.org/mbostock/6123708

the thing I can't understand is how I can possibly add new circles when a button is clicked, for example:

d3.tsv("dots.tsv", dottype, function (error, dots) {
    container.append("g")
                .attr("class", "dot")
                .selectAll("circle")
                .data(dots)
                .enter().append("circle")
                .attr("r", 5)
                .attr("cx", function (d) {
                    return d.x;
                })
                .attr("cy", function (d) {
                    return d.y;
                })
                .call(drag);
        });

        function dottype(d) {
            d.x = +d.x;
            d.y = +d.y;
            return d;
        }
self.addNode = function () {
            container.append('g')
                .attr('class', 'dot')
                .append('circle')
                .attr('r', 35)
                .attr('cx', (i * 100) + cx)
                .attr('cy', (i * 100) + cy)
                //.style('fill', 'purple')
                .call(drag);
            i++;
        };

The first part is the same as the example, I then created a function to add a single circle inside the container, the problem is that when I drag the new added circle I can move only the external G element, thus moving every other circle together.

I can't understand why, as the functions are the same (I removed even the style 'fill' to be sure)

Upvotes: 0

Views: 132

Answers (1)

eko
eko

Reputation: 40647

You are giving your layout a data in .data(dots) but when you are adding a node in your addNode function, the layout is unaware of this new data. What you want is to add/push the new node data to your data array(dots) and recall the drawing function.

Therefore, you should cut the code under d3.tsv into a function to call it again when you update the data.

Upvotes: 1

Related Questions