d3 test

by jbrosi

HTML

<html>
<head>
<style>
html, body, svg {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
</style>
</head>
<body>

<svg id="svg" />
</body>
</html>

JavaScript

svgElem = document.querySelector('#svg')
const svg = d3.select(svgElem)
const zoomLayer = svg.append("g")

const zoom = d3.zoom().on("zoom", function() {
  zoomLayer.attr("transform", d3.event.transform)
})

svg.call(zoom)

// initial zoom:
// svg.transition().duration(1000).call(zoom.transform, d3.zoomIdentity.translate(30, 30).scale(4).translate(-30, -30))


const data1 = {
  nodes: [{
      "label": "Kevin Spacey",
      "width": 140,
      "height": 100,
      "x": 70,
      "y": 50
    },
    {
      "label": "Saul Williams",
      "width": 140,
      "height": 100,
      "x": 260,
      "y": 50
    },
    {
      "label": "Brad Pitt",
      "width": 140,
      "height": 100,
      "x": 260,
      "y": 200
    },
    {
      "label": "Harrison Ford",
      "width": 140,
      "height": 100,
      "x": 70,
      "y": 350
    },
    {
      "label": "Luke Wilson",
      "width": 140,
      "height": 100,
      "x": 260,
      "y": 350
    },
    {
      "label": "Kevin Bacon",
      "width": 140,
      "height": 100,
      "x": 450,
      "y": 125
    },
  ],
  edges: [{
      "points": [{
        "x": 140,
        "y": 50
      }, {
        "x": 165,
        "y": 50
      }, {
        "x": 190,
        "y": 50
      }]
    },
    {
      "points": [{
        "x": 330,
        "y": 50
      }, {
        "x": 355,
        "y": 50
      }, {
        "x": 386.6666666666667,
        "y": 75
      }]
    },
    {
      "points": [{
        "x": 330,
        "y": 200
      }, {
        "x": 355,
        "y": 200
      }, {
        "x": 386.6666666666667,
        "y": 175
      }]
    },
    {
      "points": [{
        "x": 140,
        "y": 350
      }, {
        "x": 165,
        "y": 350
      }, {
        "x": 190,
        "y": 350
      }]
    }
  ]
};


const lineOffset = {
  x: 70,
  y: 50
}
const drawLine = d3.line()
  .x(function(d) {
    return d.x + lineOffset.x;
  })
  .y(function(d) {
    return d.y + lineOffset.y;
  })
 ...