Javascript 如何使用html和json文件创建自定义模块？_Javascript_Drupal_Drupal 8

Javascript 如何使用html和json文件创建自定义模块？

javascript drupal

Javascript 如何使用html和json文件创建自定义模块？,javascript,drupal,drupal-8,Javascript,Drupal,Drupal 8,我必须做网络拓扑可视化。我使用D3js创建网络拓扑，数据来自JSON文件。代码如下所示我有两个文件index.html和data.json index.html <!DOCTYPE html> <html> <head></head> <meta charset="utf-8"> <style> body {font-family: 'Architects Daughter', cursi

我必须做网络拓扑可视化。我使用D3js创建网络拓扑，数据来自JSON文件。
代码如下所示

我有两个文件index.html和data.json

index.html

<!DOCTYPE html>
<html>
  <head></head>
<meta charset="utf-8">
<style>
    body {font-family: 'Architects Daughter', cursive;}
</style>
<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Architects+Daughter" rel="stylesheet">
<script>

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var simulation = d3.forceSimulation()
    .force("link", d3.forceLink().id(function(d) { return d.id; }))
    .force("charge", d3.forceManyBody().strength(-400))
    .force("center", d3.forceCenter(width / 2, height / 2));


d3.json("data.json", function(error, graph) {
  if (error) throw error;
  
  graph.links.forEach(function(d){
    d.source = d.source_id;    
    d.target = d.target_id;
  });           

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

  var node = svg.append("g")
            .attr("class", "nodes")
  .selectAll("circle")
            .data(graph.nodes)
  .enter().append("circle")
          .attr("r", 6)
          .call(d3.drag()
              .on("start", dragstarted)
              .on("drag", dragged)
              .on("end", dragended));
  
  var label = svg.append("g")
      .attr("class", "labels")
      .selectAll("text")  
      .data(graph.nodes)
      .enter().append("text")
        .attr("class", "label")
        .text(function(d) { return d.name; });

  simulation
      .nodes(graph.nodes)
      .on("tick", ticked);

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

  function ticked() {
    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; });

    node
         .attr("r", 20)
         .style("fill", "#d9d9d9")
         .style("stroke", "#969696")
         .style("stroke-width", "1px")
         .attr("cx", function (d) { return d.x+6; })
         .attr("cy", function(d) { return d.y-6; });  
    
    label
            .attr("x", function(d) { return d.x; })
            .attr("y", function (d) { return d.y; })
            .style("font-size", "13px").style("fill", "#4393c3");
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart()
  simulation.fix(d);
}

function dragged(d) {
  simulation.fix(d, d3.event.x, d3.event.y);
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  simulation.unfix(d);
}

</script>
</html>

我需要使用这些to文件创建一个自定义模块，以便在Drupal 8站点中显示我的网络拓扑。
如何将此网络拓扑设置为一个自定义模块，以显示在Drupal站点中？？在Drupal 8中是否有其他方式显示网络拓扑

感谢您的帮助

这是一个定制模块可以实现的，首先，你读过了吗？您可能需要了解有关库（加载Java脚本等）和路由的部分。现在的问题或多或少是“如何制作自定义模块”，并不是很具体，也不是关于如何制作自定义模块。我想制作一个模块来显示网络拓扑。

  "nodes": [
    {
      "id": 1,
      "name": "m1"
    },
    {
      "id": 2,
      "name": "m2"
    },
    {
      "id": 3,
      "name": "S1"
    },
    {
      "id": 4,
      "name": "m3"
    },
    {
      "id": 5,
      "name": "S2"
    },
    {
      "id": 6,
      "name": "m4"
    },
    {
      "id": 7,
      "name": "m5"
    },
    {
      "id": 8,
      "name": "m6"
    },
    {
      "id": 9,
      "name": "m7"
    },
    {
      "id": 10,
      "name": "m8"
    },
    {
        "id": 11,
        "name": "S3"
    },
    {
        "id": 12,
        "name": "m9"
    },
    {
        "id": 13,
        "name": "m10"
    }
    

  ],
  "links": [

    {
      "source_id": 3,"target_id": 7
    },
    {
      "source_id": 3,"target_id": 4
    },
    {
      "source_id": 3,"target_id": 5
    },
    {
      "source_id": 3,"target_id": 2
    },
            {
      "source_id": 5,"target_id": 1
    },
    {
      "source_id": 5,"target_id": 6
    },
     {
      "source_id": 5,"target_id": 10
    },
    {
      "source_id": 5,"target_id": 8
    },
    {
      "source_id": 3,"target_id": 9
    },
    {
      "source_id": 3,"target_id": 11
    },
    {
      "source_id": 5,"target_id": 11
    },
    {
      "source_id": 11,"target_id": 12
    },
    {
        "source_id": 11,"target_id": 13
    }
      
  ]
}