How to transform the code update d3 structure (and enter the appropriate processing exit)

d3 of enter and exit

There are many online blog to explain. Say okay, see: https://blog.csdn.net/nicolecc/article/details/50786661

How rude their own drawing code, be refined (update)

 Bibi small, the sample code:

d3.selectAll('.circle_group').children().remove();
var circle_group = d3.selectAll('.circle_group')
    .data(circleData)
    .enter().append('g')
    .attr('class', 'circle_group brushNode')
    .attr('transform',
        function (d) {
            return 'translate(' + d.x + ',' + d.y + ')';
        })
    .on('click', function (d) {
        if (shiftKey) {
            //标记当前点
            d3.select(this).classed("selected", function (d) {

                d.selected = !d.selected;
                d.previouslySelected = !d.selected;
                return d.selected;
            })

            //阻止事件冒泡
            d3.event.stopPropagation();
        }
    })
    .on("contextmenu", function (node) {
        contextmenu("Rmenu");
    })

circle_group.append('circle')
    .attr('r', function (d) {
        return d.r;
    })
    .style("Fill", function (D) {
         return color20 (d.index); 
    }) 

; 
circle_group.append ( 'text' ) 
    .attr ( "Dy", ".35em" ) 
    .attr ( "Anchor-text", " middle ") // plus the data in the circle 
    .style ( 'Fill', function (Node) {
         return '# 555' ; 
    }) 
    .attr ( " Y ", -7 ) 
    .text (D => d.text ); 

circle_group.call (d3.drag () 
// defines the origin of the elements dragging behavior, set the circle's center position to avoid the obvious elements of beating, similar to the method d3v3 of origin. 
    .subject(function () {
        var thisData = d3.select(this);
        return {
            x: thisData.datum().x,
            y: thisData.datum().y
        };
    })
    .on("start", dragstarted)
    .on("drag", dragmove)
    .on("end", dragended));

 Obviously, the easy way is so new to drawing. Drawing on the results, if you do not add animation no problem at all, as long as a transition animation add animation, graphics are all the process from scratch, and we want to see is, if the update point, then, to see where did he (position) where update (position). (Here is not to add animated transitions, and on what .transition line of code (). Duration (300)).

Transformation as follows:

    // This code is then changed, if any added functionality 
const circle_data d3.selectAll = ( '. Circle_group'). Data (circleData)   // update section, if the number of data you did not change, it circle_data.size () = number of your data content changes, you can update the circle_data considered as part of the line, which compiled the code to be sure 
    .attr ( 'the Transform',              // when first run, because there is no element circle_data.size () = 0 , so this does not run the transform 
        function (D) {
             return 'Translate (' + DX + ',' + Dy + ')' ; 
        }); 
const circle_enter . circle_data.enter = () the append ( 'G')   / / the Add section, when the first run, circle_enter.size () = all elements, the initial setting operation for all the circle_enter 
    .attr ( 'class', 'circle_group brushNode' ) 
    .attr ( 'Transform',
        function (D) {
             return 'Translate (' + DX + ',' + Dy + ')' ; 
        }); 
circle_data.exit () Remove ();.   // if you delete some of the data when, .exit () .size ()> 0 



circle_enter.on ( 'the Click', function (D) {
     IF (shiftKey) {
         // mark the current point 
        d3.select ( the this ) .classed ( "Selected", function (D) { 

            d.selected =! d.selected; 
            d.previouslySelected =! d.selected;
             return d.selected; 
        }) 

        // prevent the event from bubbling
        d3.event.stopPropagation (); 
    } 
}) 
    .on ( "contextMenu", function (Node) { 
        contextMenu ( "Rmenu" ); 
    }) 

circle_enter.append ( 'Circle')      // the Add 
    .attr ( 'R & lt', = D> DR) 
    .style ( "Fill", function (D) {
         return color20 (d.index); 
    }); 
circle_data.select ( 'Circle')   // Update, herein do not append, because the elements already there (enter (). append () passed). Of course, when you first run (the view is first displayed), which is running less than a few codes. 
    .attr ( 'R & lt', D => DR) 
    .style ( " (d) {
        return color20(d.index);
    });

circle_enter.append('text')  //add
    .attr("dy", ".35em")
    .attr("text-anchor", "middle")//在圆圈中加上数据
    .style('fill', function (node) {
        return '#555';
    })
    .attr("y", -7)
    .text(d => d.text);
circle_data.select('text')  //update  不要append 
    .text(d => d.text);

const drag=d3.drag()
//Defines the elements of the origin of the drag behavior, set the location for the center circle to avoid the obvious elements of beating, similar to the method d3v3 of origin. 
    .Subject ( function () {
         var thisData = d3.select ( the this );
         return { 
            X: thisData.datum () X,. 
            Y:. thisData.datum () Y 
        }; 
    }) 
    .on ( "Start" , dragstarted ) 
    .on ( "the Drag" , DragMove) 
    .on ( "End" , dragended); 
circle_enter.call (the Drag); 
circle_data.call (the Drag);    // Update note that this must rebind it, involved here drag initialization (initial position for initialization Subject drag drag point)

 

Knock blackboard

1, Update (initial position such d3.drag ()) is the location of all the events to be part of the re-bound, otherwise unpredictable results may occur.

2, update portion of the data relating to attr, style you want to reset, then you do not append a. (Since there is this element because you have in the previous .enter (). Append (). Append (other elements) added over here just need to update what you can.). Some fixed attr, style would not repeat set up (before enter has been bound over)