Question

我使用由 Kenneth Kufluk 开发的思维导图程序。我使用他的程序的原因是因为我有一个程序要求用户输入思维导图的中心节点的单词。然后，我的程序将询问用户是否要继续。如果他们想要继续，则会要求用户输入思维导图的子节点的内容，此过程将继续，直到用户不想进入。

以下是HTML代码和生成思维导图的图片：

<!DOCTYPE html>
<html>

<head>
  <!-- Kenneth Kufluk 2008/09/10 -->
  <title>js-mindmap demo - JavaScript Mindmap</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="js-mindmap.css" />
  <link href="style.css" type="text/css" rel="stylesheet"/>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <!-- UI, for draggable nodes -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

  <!-- Raphael for SVG support (won't work on android) -->
  <script type="text/javascript" src="raphael-min.js"></script>

  <!-- Mindmap -->
  <script type="text/javascript" src="js-mindmap.js"></script>

  <!-- Kick everything off -->
  <script src="script.js" type="text/javascript"></script>
</head>

    <body>
      <ul>
        <li><a>kenneth</a>
          <ul>
            <li><a>Twitter</a></li>
            <li><a>LinkedIn</a></li>
            <li><a>Facebook</a></li>
            <li><a>RSS Feed</a></li>
            <li><a> Feed</a></li>
          </ul>
        </li>
      </ul> 
    </body>
</html>

Mind map generated by Kufluk's programme

在阅读这些代码后，我认为如果你想添加一个子节点，你应该很容易理解，那么你只需要一个新的li元素。

所以，现在我的问题是如何添加用户输入的新li项。这是因为在程序运行之前，我将删除body标记中存在的任何内容，以确保不相关的内容不会出现在思维导图中。但是，当我尝试Create a <ul> and fill it based on a passed array中的代码时，我输入的单词没有出现在形状中，但它出现在左上角，而不是如下图所示（我写的代码也粘贴在下面）。

<!DOCTYPE html>
<html>
<head>
  <!-- Kenneth Kufluk 2008/09/10 -->
  <title>js-mindmap demo - JavaScript Mindmap</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <link rel="stylesheet" type="text/css" href="js-mindmap.css" />
  <link href="style.css" type="text/css" rel="stylesheet"/>

  <!-- jQuery -->
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  <!-- UI, for draggable nodes -->
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.min.js"></script>

  <!-- Raphael for SVG support (won't work on android) -->
  <script type="text/javascript" src="raphael-min.js"></script>

  <!-- Mindmap -->
  <script type="text/javascript" src="js-mindmap.js"></script>

  <!-- Kick everything off -->
  <script src="script.js" type="text/javascript"></script>

  <script src="mindMapConstructor.js" type="text/javascript"></script>

</head>

<body>

    <div id="displayMindMap"></div>

    <script language= "javascript" type= "text/javascript">
        function generateMindMap()
        {
            var list = document.createElement('ul');

            var centerNode = document.createElement('li');

            var link = document.createElement('a');

            centerNode.appendChild(document.createTextNode('Kenneth'));

            list.appendChild(centerNode);

            return list;    
        }

        document.getElementById('displayMindMap').appendChild(generateMindMap());
    </script>


  <!-- <ul>
    <li><a>haha</a>
      <ul>
        <li><a>Twitter</a></li>
        <li><a>LinkedIn</a></li>
        <li><a>Facebook</a></li>
        <li><a>RSS Feed</a></li>
      </ul>
    </li>
  </ul> -->
</body>
</html>

Word appears outside the shape

如果有人知道如何使单词输入显示为红色形状，请至少给我一些关于如何做的提示。非常感谢。

PS：这是我的大学作业，我学到的编程语言只是HTML和JavaScript。

Answer 1

从观看演示开始，script.js“将所有内容都关掉”。基本上它会抓取数据并在文档准备就绪时构建思维导图。

您正在向列表添加元素，但思维导图不会自动获取此内容;它只抓取运行时出现的信息。

快速查看思维导图代码后，我可以看到有一些功能，特别是：

$.fn.addNode = function (parent, name, options) {
    var obj = this[0];
    var node = obj.nodes[obj.nodes.length] = new Node(obj, name, parent, options);
    console.log(obj.root);
    obj.root.animateToStatic();
    return node;
}

和

$.fn.addRootNode = function (name, opts) {
    var node = this[0].nodes[0] = new Node(this[0], name, null, opts);
    this[0].root = node;
    return node;
}

希望能回答你的问题，为什么它不适合你。更多的挖掘，你可能会让这个工作。

使用JavaScript在程序执行时将列表元素插入到body标记中

1 个答案: