d3: how to drag line elements independently of background

Question

I have developed an applet that shows a d3 diagonal tree. The graph is navigatable by dragging the background.

It is based on the code found at the following link: https://bl.ocks.org/adamfeuer/042bfa0dde0059e2b288

I am trying to have vertical lines across the page to further annotate the tree/ graph (based on the following link: https://bl.ocks.org/dimitardanailov/99950eee511375b97de749b597147d19).

See below:

See here: https://jsfiddle.net/chrisclarkson100/opfq6ve8/28/

I append the lines to the graph as follows:

    var data_line = [
          {
            'x1': 300,
            'y1': 700,
            'x2': 300,
            'y2': 700
          },
          ////....
      ];
      
      // Generating the svg lines attributes
      var lineAttributes = {
          ....
          'x1': function(d) {
              return d.x1;
          },
          'y1': function(d) {
              return screen.availHeight;
          },
          'x2': function(d) {
              return d.x2;
          },
          'y2': function(d) {
              return 0;
          }
      };
      
      var drag_line = d3.behavior.drag()
        .origin(function(d) { return d; })
        .on('drag', dragged_line);
      
      // Pointer to the d3 lines
    var svg = d3.select('body').select('svg');
      var lines = svg
        .selectAll('line')
          .data(data_line)
        .enter().append('g') 
          .attr('class', 'link');

      links_lines=lines.append('line')
              .attr(lineAttributes)
              .call(drag_line);

      lines.append('text')
          .attr('class','link_text')
          .attr("x", d => d.x1)
          .attr("y", d => 350)
          .style('fill', 'darkOrange')
          .style("font-size", "30px")

      function dragged_line() {
          var x = d3.event.dx;
          var y = d3.event.dy;
          var line = d3.select(this);
          // Update the line properties
          var attributes = {
            x1: parseInt(line.attr('x1')) + x,
            y1: parseInt(line.attr('y1')) + y,
            x2: parseInt(line.attr('x2')) + x,
            y2: parseInt(line.attr('y2')) + y,
          };
          line.attr(attributes);
      }

The lines display as I wanted and are draggable. However, when I drag them, the background/ tree network moves with them... I want the different draggable elements to be independent of eachother.

Can anybody spot how I'm failing to make the dragging interactivity of each element independent of eachother?

user_431222 · Answer

Here's a JSFiddle that seems to do what you want– you can move the vertical lines without moving the tree; and move the tree without moving the vertical lines:

https://jsfiddle.net/adamfeuer/gd4ouvez/125/

(That JSFiddle uses a much smaller dataset of tree nodes; the one you linked to was too big to easily iterate and debug.)

The issue with the code you posted is that the zoom (pan) function for the tree is active at the same time the zoom() for the lines is active, so the tree and the active line drag at the same time.

I added a simple mechanism to separate the two – a boolean called lineDragActive. The code then checks for that in the tree zoom(), sets it true when a line drag starts, and false when the line drag ends:

      // Define the zoom function for the zoomable tree
  
      // flag indicates if line dragging is active...
      // if so, we don't want to drag the tree
      var lineDragActive = false;
      function zoom() {
        if (lineDragActive == false) {
        // not line dragging, so we can zaoom (drag) the tree
        svgGroup.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
        }
      }

[...]

  function drag_linestarted() {
    // tell others not to zoom while we are zooming (dragging)
    lineDragActive = true;

    d3.select(this).classed(activeClassName, true);
  }

  function drag_lineended() {
    // tell others that zooming (dragging) is allowed
    lineDragActive = false;

    d3.select(this).classed(activeClassName, false);

    label = baseSvg.selectAll('.link_text').attr("transform", "translate(" + String(Number(this.x1.baseVal.value) - 400) + "," + 0 + ")");

  }

d3: how to drag line elements independently of background

1 Answers