如何在D3.js中创建多个元素？

Question

在我的django项目中，我有3个相互连接的模型。 GROUP -> TASK -> FUNCTION。我想在D3.js库的帮助下创建树。问题是我目前的代码只显示了Group模型的第一个元素。如何显示其他元素？可以在D3.js吗？

models.py：

class Group(models.Model):
    name = models.CharField(_('Name'), max_length=250)

class Task(models.Model):
    group = models.ForeignKey(Group, on_delete=models.CASCADE)
    name = models.CharField(_('Name'), max_length=250)

class Function(models.Model):
    task = models.ForeignKey(Task, on_delete=models.CASCADE)
    name = models.CharField(_('Name'), max_length=250)

模板：

var treeData = [
   {% for group in groups %}
   {
   "name": "{{ group }}",
   "parent": "null",
   "children": [
      {% for task in group.task_set.all %}
      {
      "name": "{{ task }}",
      "parent": "{{ group }}",
      "children": [
         {% for function in task.function_set.all %}
         {
            "name": "{{ function }}",
            "parent": "{{ task }}"
         }{% if not forloop.last %},{% endif %}
         {% endfor %}
      ]
      }{% if not forloop.last %},{% endif %}
   {% endfor %}
  ]
 }{% if not forloop.last %},{% endif %}
{% endfor %}
];