Reputation: 11

D3 Tree diagram, Zoom, Pan, fit window for newbies?

Ok, so I tried everithing and I´ve been doing reserch but no luck. I need to implement this 3 key features to my diagram and not even chatGPT could help me with this. I dont know how to code at all but I managed to get this far. I managed to change color to nodes and links, add url links and change tree structure to suit my needs. I just need zoom, pan and window adaptability (as shown in so many diagrams arround here)

<!DOCTYPE html>
<meta charset="UTF-8">
<style>

.node circle {
  fill: #fff;
  stroke: orange;
  stroke-width: 3px;
}

.node text {
  font: 10px arial;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 5px;
}

</style>

<body>

<!-- load the d3.js library --> 
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>

var treeData = {
  name: "EMPRESA",
  children: [
    {
      name: "INTRODUCCION BIM",
      children: [
        {
          name: "GLOSARIO DE TERMINOS BIM", url: "http://www.google.es"
        }
      ]
    },
    {
      name: "ORGANIGRAMA"
    },
    {
      name: "IMPLEMENTACION BIM"
    },
    {
      name: "FORMACION BIM"
    },
    {
      name: "ESTANDARES BIM"
    },
    {
      name: "GESTION DE PROYECTOS BIM",
      "children": [
        {
          name: "MODELADO BIM",
          children: [
            {
              name: "DIBUJO 2D"
            },
            {
              name: "MODELADO 3D"
            },
            {
              name: "GESTION DE DATOS"
            },
            {
              name: "PLANTILLAS BIM"
            }
          ]
        },
        {
          name: "DOCUMENTACION BIM",
          children: [
            {
              name: "NOMENCLATURA Y ESANDARIZACION DE DOCUMENTOS"
            }
          ]
        },
        {
          name: "PLANIFICACION"
        },
        {
          name: "AUDITORIAS/CONTROL DE CALIDAD"
        },
        {
          name: "TRABAJO COLABORATIVO"
        }
      ]
    },
    {
      name: "INFRAESTRUCTURA Y RECURSOS",
      children: [
        {
          name: "HARDWARE"
        },
        {
          name: "SOFTWARE"
        },
        {
          name: "BIMCLOUD"
        }
      ]
    },
    {
      name: "LEGAL"
    }
  ]
}

// Set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
    width = 2080 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom;

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate("
          + margin.left + "," + margin.top + ")");

var i = 0,
    duration = 750,
    root;

// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if(d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
      links = treeData.descendants().slice(1);

  // Normalize for fixed-depth.
  nodes.forEach(function(d){ d.y = d.depth * 380});

  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
      .data(nodes, function(d) {return d.id || (d.id = ++i); });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
      .attr('class', 'node')
      .attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on('click', click);

  // Add Circle for the nodes
  nodeEnter.append('circle')
      .attr('class', 'node')
      .attr('r', 1e-6)
      .style("fill", function(d) {
          return d._children ? "orange" : "#fff";
      });

  // Add labels for the nodes
  nodeEnter.append('text')
      .attr("dy", ".35em")
      .attr("x", function(d) {
          return d.children || d._children ? -13 : 13;
      })
      .attr("text-anchor", function(d) {
          return d.children || d._children ? "end" : "start";
      })
      .html(function(d) {
         return d.data.url ? '<a href="' + d.data.url + '" target="_blank">' + d.data.name + '</a>' : d.data.name;
     });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")";
     });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 10)
    .style("fill", function(d) {
        return d._children ? "orange" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) {
          return "translate(" + source.y + "," + source.x + ")";
      })
      .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
      .data(links, function(d) { return d.id; });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
      .attr("class", "link")
      .attr('d', function(d){
        var o = {x: source.x0, y: source.y0}
        return diagonal(o, o)
      });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
      .duration(duration)
      .attr('d', function(d){ return diagonal(d, d.parent) });

  // Remove any exiting links
  var linkExit = link.exit().transition()
      .duration(duration)
      .attr('d', function(d) {
        var o = {x: source.x, y: source.y}
        return diagonal(o, o)
      })
      .remove();

  // Store the old positions for transition.
  nodes.forEach(function(d){
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {

    path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`

    return path
  }

  // Toggle children on click.
  function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
    update(d);
  }
}

</script>
</body>

I tried to implement using several examples but couldnt get it to work, dont know where to put the code or how to adapt it. Almost got it but zooming is not responding nicely, fluid or when hovering the mouse at any point in the canvas, the panning is missing and the window adaptation is missing too.

some example I found

text

<!DOCTYPE html>
<meta charset="UTF-8">
<style>

.node circle {
  fill: #fff;
  stroke: orange;
  stroke-width: 3px;
}

.node text {
  font: 10px arial;
}

.link {
  fill: none;
  stroke: #ccc;
  stroke-width: 5px;
}

</style>

<body>

<!-- load the d3.js library --> 
<script src="https://d3js.org/d3.v5.min.js">
// Zoom and drag functionality
var zoom = d3.zoom()
    .scaleExtent([0.1, 4])
    .on('zoom', () => {
        svg.attr('transform', d3.event.transform);
    });

svg.call(zoom);
</script>
<script>

var treeData = {
  name: "EMPRESA",
  children: [
    {
      name: "INTRODUCCION BIM",
      children: [
        {
          name: "GLOSARIO DE TERMINOS BIM", url: "http://www.google.es"
        }
      ]
    },
    {
      name: "ORGANIGRAMA"
    },
    {
      name: "IMPLEMENTACION BIM"
    },
    {
      name: "FORMACION BIM"
    },
    {
      name: "ESTANDARES BIM"
    },
    {
      name: "GESTION DE PROYECTOS BIM",
      "children": [
        {
          name: "MODELADO BIM",
          children: [
            {
              name: "DIBUJO 2D"
            },
            {
              name: "MODELADO 3D"
            },
            {
              name: "GESTION DE DATOS"
            },
            {
              name: "PLANTILLAS BIM"
            }
          ]
        },
        {
          name: "DOCUMENTACION BIM",
          children: [
            {
              name: "NOMENCLATURA Y ESANDARIZACION DE DOCUMENTOS"
            }
          ]
        },
        {
          name: "PLANIFICACION"
        },
        {
          name: "AUDITORIAS/CONTROL DE CALIDAD"
        },
        {
          name: "TRABAJO COLABORATIVO"
        }
      ]
    },
    {
      name: "INFRAESTRUCTURA Y RECURSOS",
      children: [
        {
          name: "HARDWARE"
        },
        {
          name: "SOFTWARE"
        },
        {
          name: "BIMCLOUD"
        }
      ]
    },
    {
      name: "LEGAL"
    }
  ]
}

// Set the dimensions and margins of the diagram
var margin = {top: 20, right: 90, bottom: 30, left: 90},
    width = 2080 - margin.left - margin.right,
    height = 900 - margin.top - margin.bottom;

// append the svg object to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.right + margin.left)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate("
          + margin.left + "," + margin.top + ")");

var i = 0,
    duration = 750,
    root;

// declares a tree layout and assigns the size
var treemap = d3.tree().size([height, width]);

// Assigns parent, children, height, depth
root = d3.hierarchy(treeData, function(d) { return d.children; });
root.x0 = height / 2;
root.y0 = 0;

// Collapse after the second level
root.children.forEach(collapse);

update(root);

// Collapse the node and all it's children
function collapse(d) {
  if(d.children) {
    d._children = d.children
    d._children.forEach(collapse)
    d.children = null
  }
}

function update(source) {

  // Assigns the x and y position for the nodes
  var treeData = treemap(root);

  // Compute the new tree layout.
  var nodes = treeData.descendants(),
      links = treeData.descendants().slice(1);

  // Normalize for fixed-depth.
  nodes.forEach(function(d){ d.y = d.depth * 380});

  // ****************** Nodes section ***************************

  // Update the nodes...
  var node = svg.selectAll('g.node')
      .data(nodes, function(d) {return d.id || (d.id = ++i); });

  // Enter any new modes at the parent's previous position.
  var nodeEnter = node.enter().append('g')
      .attr('class', 'node')
      .attr("transform", function(d) {
        return "translate(" + source.y0 + "," + source.x0 + ")";
    })
    .on('click', click);

  // Add Circle for the nodes
  nodeEnter.append('circle')
      .attr('class', 'node')
      .attr('r', 1e-6)
      .style("fill", function(d) {
          return d._children ? "orange" : "#fff";
      });

  // Add labels for the nodes
  nodeEnter.append('text')
      .attr("dy", ".35em")
      .attr("x", function(d) {
          return d.children || d._children ? -13 : 13;
      })
      .attr("text-anchor", function(d) {
          return d.children || d._children ? "end" : "start";
      })
      .html(function(d) {
         return d.data.url ? '<a href="' + d.data.url + '" target="_blank">' + d.data.name + '</a>' : d.data.name;
     });

  // UPDATE
  var nodeUpdate = nodeEnter.merge(node);

  // Transition to the proper position for the node
  nodeUpdate.transition()
    .duration(duration)
    .attr("transform", function(d) { 
        return "translate(" + d.y + "," + d.x + ")";
     });

  // Update the node attributes and style
  nodeUpdate.select('circle.node')
    .attr('r', 10)
    .style("fill", function(d) {
        return d._children ? "orange" : "#fff";
    })
    .attr('cursor', 'pointer');


  // Remove any exiting nodes
  var nodeExit = node.exit().transition()
      .duration(duration)
      .attr("transform", function(d) {
          return "translate(" + source.y + "," + source.x + ")";
      })
      .remove();

  // On exit reduce the node circles size to 0
  nodeExit.select('circle')
    .attr('r', 1e-6);

  // On exit reduce the opacity of text labels
  nodeExit.select('text')
    .style('fill-opacity', 1e-6);

  // ****************** links section ***************************

  // Update the links...
  var link = svg.selectAll('path.link')
      .data(links, function(d) { return d.id; });

  // Enter any new links at the parent's previous position.
  var linkEnter = link.enter().insert('path', "g")
      .attr("class", "link")
      .attr('d', function(d){
        var o = {x: source.x0, y: source.y0}
        return diagonal(o, o)
      });

  // UPDATE
  var linkUpdate = linkEnter.merge(link);

  // Transition back to the parent element position
  linkUpdate.transition()
      .duration(duration)
      .attr('d', function(d){ return diagonal(d, d.parent) });

  // Remove any exiting links
  var linkExit = link.exit().transition()
      .duration(duration)
      .attr('d', function(d) {
        var o = {x: source.x, y: source.y}
        return diagonal(o, o)
      })
      .remove();

  // Store the old positions for transition.
  nodes.forEach(function(d){
    d.x0 = d.x;
    d.y0 = d.y;
  });

  // Creates a curved (diagonal) path from parent to the child nodes
  function diagonal(s, d) {

    path = `M ${s.y} ${s.x}
            C ${(s.y + d.y) / 2} ${s.x},
              ${(s.y + d.y) / 2} ${d.x},
              ${d.y} ${d.x}`

    return path
  }

  // Toggle children on click.
  function click(d) {
    if (d.children) {
        d._children = d.children;
        d.children = null;
      } else {
        d.children = d._children;
        d._children = null;
      }
    update(d);
  }
}


// Zoom and drag functionality
var zoom = d3.zoom()
    .scaleExtent([0.1, 4])
    .on('zoom', () => {
        svg.attr('transform', d3.event.transform);
    });

svg.call(zoom);
</script>
</body>

Upvotes: 1

D3 Tree diagram, Zoom, Pan, fit window for newbies?

Answers (0)

Related Questions