drag event not fired on mobile devices

Question

i'm making a application based on d3 force layout v5, needing for interactions with mouse and touch events. How i can link touch events in this?

Here's my sample code with the problem, it's only occur on full page: https://codepen.io/bragamonte/full/QRqvEd

  var svg = d3.select("svg"), width = svg.property('clientWidth'),
  height = svg.attr("height");
  // height = 500;


  var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }).distance(d => (10 - d.source.order) * 9 ))
    .force('charge', d3.forceManyBody().strength(-400).theta(1))
    .force('collide', d3.forceCollide().radius(d => 40).iterations(2))
    .force("center", d3.forceCenter(width / 2, height / 2))
  ;


  const graph = 
    {
      "nodes": [
        {"id": 1, "name": "SIGMA", "order": 1, "icon": "https://github.com/favicon.ico"},
        // 
        {"id": 2, "name": "PLAN", "order": 2, "icon": "https://github.com/favicon.ico"},
        {"id": 3, "name": "DO", "order": 2, "icon": "https://github.com/favicon.ico"},
        {"id": 4, "name": "CHECK", "order": 2, "icon": "https://github.com/favicon.ico"},
        {"id": 5, "name": "ACTION", "order": 2, "icon": "https://github.com/favicon.ico"},
        {"id": 6, "name": "Dashboard", "href": "/dashboard", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 7, "name": "SS", "href": "/ss", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 8, "name": "OS", "href": "/os", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 9, "name": "Preventiva", "href": "/preventiva", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 10, "name": "Estrutura", "href": "/cadastros/departamentos", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 11, "name": "Relatórios", "href": "/relatorios", "order": 3, "icon": "https://github.com/favicon.ico"},
        {"id": 12, "name": "Telemetria", "href": "/telemetria", "order": 3, "icon": "https://github.com/favicon.ico"}
      ],
      "links": [
        // main
        {"source": "2", "target": 1, "distance": 130},
        {"source": "3", "target": 1, "distance": 130},
        {"source": "4", "target": 1, "distance": 130},
        {"source": "5", "target": 1, "distance": 130},
        // 
        {"source": "6", "target": 4, "distance": 50},
        {"source": "7", "target": 3, "distance": 50},
        {"source": "8", "target": 3, "distance": 50},
        {"source": "9", "target": 3, "distance": 50},
        {"source": "10", "target": 2, "distance": 50},
        {"source": "11", "target": 4, "distance": 50},
        {"source": "12", "target": 2, "distance": 50},
      ]
  };


  // var node, link, label;

  function dragstarted(d) {
    console.log(' >> drag started');
    if (!d3.event.active) simulation.alphaTarget(0.3).restart()
    d.fx = d.x
    d.fy = d.y
  }

  function dragged(d) {
    console.log(' >> dragged');
    d.fx = d3.event.x
    d.fy = d3.event.y
  }

  function dragended(d, a, b) {
    console.log(' >> drag ended');
    d.fx = d3.event.x
    d.fy = d3.event.y
    if (!d3.event.active) simulation.alphaTarget(0);
  }

  function dragsubject() {
    return simulation.find(d3.event.x, d3.event.y);
  }


    var link =
      svg.append("g")
        .style("stroke", "#aaa")
        .selectAll("line")
        .data(graph.links)
        .enter()
        .append("line");

    var node =
      svg.selectAll("circle")
        .data(graph.nodes)
        .enter()
        .append("g")
        .attr("class", "nodes")
        .attr("class", function (d) { return !!d.href ? 'node-link' : ''; })
        .call(d3.drag()
          .subject(dragsubject)
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended)
        );


      node.append("image")
          .attr("xlink:href", function (d) { return d.icon || "resources/img/icon-sigma.png"; })
          .attr("x", -25)
          .attr("y", -25)
          .attr("width", d => (10 - d.order) * 8)
          .attr("height", d => (10 - d.order) * 8);

  var label =
    svg.append("g")
      .attr("class", "labels")
      .selectAll("text")
      .data(graph.nodes)
      .enter()
      .append("text")
      .attr("dx", d => (9 - d.order) * 6)
      .attr("dy", d => (9 - d.order))
      .text(function(d) { return d.name });

  simulation.nodes(graph.nodes).on("tick", () => {
    node.attr("transform", d => `translate(${d.x},${d.y})`)

    link
      .attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });

    label
      .attr("x", function(d) { return d.x; })
      .attr("y", function (d) { return d.y; })
  });

  simulation.force("link").links(graph.links);

When used on mobile devices, like chrome developer tool, the event drag is not fired but events like start and end is it.

Answer 1

You should use touch events for mobile.

d3.select("svg").on("touchstart", yourFunction);
d3.select("svg").on("touchmove", yourFunction);