Question

我正在尝试测试一组泡泡树图表脚本。在示例中，它们提供了一个非常简单的示例，然后是通过递归代码构建的示例。我需要能够将子项添加到数据变量中的children标记。我知道这很简单，但无法弄清楚。说明说：

然后子节点（递归地）插入子数组中。

rootNode = { 标签：“总预算”，金额：1000000，孩子：[{ 标签：“健康”，金额：650000 }，{ 标签：“政府”，金额：350000 }] }

以下是示例中的示例代码，我想将子项添加到“第三个子元素”元素：

<script type="text/javascript">

    $(function() {
        var data = {
            label: 'Total',
            amount: 100,
            color: '#0066bb',  // color for root node, will be inherited by children
            children: [
                { label: 'First child', amount: 30 },
                { label: 'Second child', amount: 40 },
                { label: 'Third child', amount: 30, color: '#ff3300' }
            ]
        };

        new BubbleTree({
            data: data,
            container: '.bubbletree'
        });
    });

</script>

这里是git hub wiki：https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation

在正确的方向上会喜欢简单的一点。

-------确定添加了下面的推送，但它将它放在父节点上而不是我想要的子节点

<script type="text/javascript">

    $(function() {
        var data = {
            label: 'Total',
            amount: 100,
            color: '#0066bb',  // color for root node, will be inherited by children
            children: [
                { label: 'First child', amount: 30 },
                { label: 'Second child', amount: 40 },
                { label: 'Third child', amount: 30, color: '#ff3300' }

            ]
        };

        data.children.push({ label: "Computation", amount: 10 });

        new BubbleTree({
            data: data,
            container: '.bubbletree'
        });
    });

</script>

Answer 1

以下是一些纯JavaScript，向您展示您正在寻找的信息：）

 var rootNode = {
      label: "Total budget",
      amount: 1000000,
      children: [
           {
                label: "Health",
                amount: 650000
           }, {
                label: "Government",
                amount: 350000
           }
      ]
 }

 rootNode.children.push({ label: "Computation", amount: "Smomputation" });

 rootNode.children.push({ label: "Not", amount: "Too bad" });

 console.log(rootNode);

push（）添加到数组的末尾。这是你在JS中理解的超级关键内容。

我强烈建议您练习以下内容，直到掌握它们为止：

您的时间将非常充裕，因为这些是处理数据集合的基础。

我建议学习一些每个例子，并在下周每天一次或两次将它们全部写出来。

如果你看到{}，它可能是一个对象。如果你看到[]，它可能是一个数组。在那之后，您知道您可以使用哪些工具。在您的示例中，您看到子项包含在[]中，因此添加另一个涉及pop（）; ：）

同样重要的是for loops，因为它们在您发布的示例中非常有用。将其添加到我上面给出的示例的底部：

 for (var i = 0; i < rootNode.children.length; i++) {
     if (rootNode.children[i].label === "Computation") {
       console.log("Child found: " + rootNode.children[i].label + " (Hey, thats me) - Amount: " + rootNode.children[i].amount);
     } else {
       console.log("Child found: " + rootNode.children[i].label + " - Amount: " + rootNode.children[i].amount);
     }
 }

您应该对for loops，while loops和forEach();

感到满意

一旦您对这些内容感到满意，您的JavaScripting就会显着加速。玩得开心，你现在正在做的这个练习是疯狂Backend API开发工作的门户，从数据库（特别是NoSQL类型和图形数据库）获取和设置文档，以及HTTP请求/响应。

以下是您正在寻找的答案：

 var data = {
             label: 'Total',
             amount: 100,
             color: '#0066bb',  // color for root node, will be inherited by children
             children: [
                 { label: 'First child', amount: 30 },
                 { label: 'Second child', amount: 40 },
                 { label: 'Third child', amount: 30, color: '#ff3300' }
             ]
 };

 data.children[2].rodent = "meat";
 data.children[2].steven = { tractor: "driver", yolo: true };
 data.children[2].seagull = [1,2,3];

 console.log("JSON object version");
 console.log("===================");
 console.log(data);
 console.log("JSON string version");
 console.log("===================");
 console.log(JSON.stringify(data));

Javascript递归变量

1 个答案: