javascript - 如何使用表单更改 Javascript 代码中变量的值

问题描述

我刚开始（两天前）为一个学校项目学习编码，这对于我目前的技能来说可能过于雄心勃勃。我正在尝试使用给定数量的节点和链接以及给定的充电节点创建一个随机图。我使用了随机图形生成器的开源代码，但我找不到修改节点数、链接数和使用 HTML 表单收费的方法。这是不起作用的代码。如果有人可以帮助我解决这个问题，我会很高兴。（请容忍我的语法，我是初学者......）

var width = 1000,
  height = 1000;

var n = 20, // number of nodes
  m = 100, // number of links
  charge = -10000;

function changevalue() {
  var n = getElementById("numberofnodes").value;
  var m = getElementById("numberoflinks").value;
  var charge = getElementById("chargenumber").value;
}

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .on("mousedown", create);

create();

function create() {
  svg.selectAll(".link, .node").remove();
  randomGraph(n, m, charge);
}

function randomGraph(n, m, charge) { //creates a random graph on n nodes and m links
  var nodes = d3.range(n).map(Object),
    list = randomChoose(unorderedPairs(d3.range(n)), m),
    links = list.map(function(a) {
      return {
        source: a[0],
        target: a[1]
      }
    });

  var force = d3.layout.force()
    .size([width, height])
    .nodes(nodes)
    .links(links)
    .charge(charge)
    .on("tick", tick)
    .start();

  var svgLinks = svg.selectAll(".link").data(links)
    .enter().append("line")
    .attr("class", "link");

  var svgNodes = svg.selectAll(".node").data(nodes)
    .enter().append("circle")
    .attr("class", "node")
    .attr("r", 3)
    .style("fill", "white");

  svgLinks.transition().duration(800)
    .style("stroke-width", 3);

  function tick() {
    svgNodes
      .attr("cx", function(d) {
        return d.x
      })
      .attr("cy", function(d) {
        return d.y
      });

    svgLinks
      .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
      });
  }
}

function randomChoose(s, k) { // returns a random k element subset of s
  var a = [],
    i = -1,
    j;
  while (++i < k) {
    j = Math.floor(Math.random() * s.length);
    a.push(s.splice(j, 1)[0]);
  };
  return a;
}

function unorderedPairs(s) { // returns the list of all unordered pairs from s
  var i = -1,
    a = [],
    j;
  while (++i < s.length) {
    j = i;
    while (++j < s.length) a.push([s[i], s[j]])
  };
  return a;
}

<!DOCTYPE html>
<html>

<head>
  <title>Random Graph</title>
  <meta charset="utf-8">
  <style>
    .link {
      stroke: black;
    }
    
    .node {
      stroke: green;
      stroke-width: 3px;
    }
  </style>
</head>

<body>
  <h1>Voici un graphe aléatoire</h1>
  <input id="numberofnodes" type="number" />
  <input id="numberoflinks" type="number" />
  <input id="chargenumber" type="number" />
  <button type="button" onclick="changevalue()">OK</button>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <script>
  </script>
</body>

</html>

标签： javascriptforms

javascript - 如何使用表单更改 Javascript 代码中变量的值

问题描述

解决方案

推荐阅读