{"version":3,"sources":["https://lively-kernel.org/lively4/lively4-stable/templates/d3-example.js"],"names":["Morph","d3","D3Example","constructor","initialize","svg","draw","select","selectAll","width","attr","height","graph","nodes","links","link","node","drag","dragstarted","dragged","dragended","append","simulation","forceSimulation","forceLink","forceManyBody","forceX","forceY","ticked","force","d","alphaTarget","example1","data","hash","counter","forEach","element","group","example2","source","target","livelyExample"],"mappings":"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","file":"d3-example.js","sourcesContent":["\"enable aexpr\";\n\nimport Morph from 'src/components/widgets/lively-morph.js';\nimport d3 from 'src/external/d3.v4.js';\n\nexport default class D3Example extends Morph {  \n  constructor() {\n    super();\n    this.initialize();\n  }\n  \n  async initialize() {\n    this.windowTitle = \"D3Example\";\n    this._svg = this.shadowRoot.querySelector('#svgContainer');\n    this._nodes = [];\n    this._links = [];\n  }\n  \n  get svg() {\n    return this._svg;\n  }\n  \n  draw() {\n    const svg = d3.select(this.svg);\n    svg.selectAll(\"*\").remove();\n\n    const width = svg.attr(\"width\");\n    const height = svg.attr(\"height\");\n\n    const graph = {\n        nodes: this._nodes,\n        links: this._links\n    };\n\n    const link = svg.selectAll()\n            .data(graph.links)\n            .enter()\n            .append('line')\n            .attr('stroke', 'black')\n            .attr('stroke-width', '5px');\n\n    const node = svg.selectAll()\n            .data(graph.nodes)\n            .enter()\n            .append(\"g\")\n            .call(d3.drag()\n                  .on('start', dragstarted)\n                  .on('drag', dragged)\n                  .on('end', dragended));\n    \n    node\n      .append('circle')\n      .attr('r', 50)\n      .attr('fill', 'red')\n      .attr('stroke', 'black')\n      .attr('stroke-width', '5px');\n\n    const simulation = d3.forceSimulation()\n              .force('link', d3.forceLink().distance(width / 2))\n              .force('charge', d3.forceManyBody())\n              .force('centerX', d3.forceX(width / 2))\n              .force('centerY', d3.forceY(height / 2));\n\n    simulation\n        .nodes(graph.nodes)\n        .on('tick', ticked);\n\n    simulation\n        .force('link')\n        .links(graph.links);\n\n    function ticked() {\n        link\n            .attr('x1', d => d.source.x)\n            .attr('y1', d => d.source.y)\n            .attr('x2', d => d.target.x)\n            .attr('y2', d => d.target.y);\n\n        node\n            .attr('cx', d => d.x)\n            .attr('cy', d => d.y);\n    }\n\n    function dragstarted(d) {\n        if (!d3.event.active) simulation.alphaTarget(0.3).restart();\n        d.fx = d.x;\n        d.fy = d.y;\n    }\n\n    function dragged(d) {\n        d.fx = d3.event.x;\n        d.fy = d3.event.y;\n    }\n\n    function dragended(d) {\n        if (!d3.event.active) simulation.alphaTarget(0);\n        d.fx = null;\n        d.fy = null;\n    }\n  }\n  \n  example1() {\n    const data = [\n      {hash: \"324dwqad3we\"},\n      {hash: \"qwf3q4wfqwa\"},\n      {hash: \"nw8fqodwewq\"},\n      {hash: \"slnfiewolsd\"},\n      {hash: \"09hjqwbdv8q\"}\n    ];\n    let counter = 1;\n    data.forEach(element => {\n      const group = d3.select(this._svg)\n        .append('g')\n          .attr('class', 'node');\n      group.append('circle')\n        .attr('cx', 50*counter)\n        .attr('cy', 50*counter);\n      group.append('text')\n        .text(element.hash)\n        .attr('x', 50*counter + 15)\n        .attr('y', 50*counter + 7);\n      counter += 1;\n    });\n  }\n  \n  example2() {\n    this._nodes = [\n      {}, {}, {}, {}, {}, {}\n    ];\n    \n    this._links = [\n      {source: 0, target: 1},\n      {source: 1, target: 2},\n      {source: 2, target: 3},\n      {source: 4, target: 5},\n      {source: 5, target: 0}\n    ];\n    \n    this.draw();\n  }\n  \n  async livelyExample() {\n      this.example2();\n  }\n}"]}