D3.js 有向图 Django 集成

Question

我有一个简单的 Django 应用程序，它查询数据库并显示返回对象的字段。我想知道将this 定向图可视化集成到我的项目中的最佳方法是什么；到目前为止，我从未使用过 d3。

请允许我解释一下我的申请。目前，它只是一个表单，允许用户通过输入书籍的唯一 ID 来查询数据库中有关书籍信息的内容。这工作正常，内容通过使用模板显示。

我想要做的是使用查询对象的字段之一将数据推送到上面的图表示例中，并在按下文本链接时简单地在新窗口中显示此图表。

这是我的应用程序结构：

代码

myapp.models.py：

from django.db import models

class Book(models.Model):
    uid = models.IntegerField(primary_key=True)
    title = models.CharField(max_length=30)
    related_books = models.CharField(max_length=2048)
    class Meta:
        db_table = u'books'

related_books 字段包含我想要绘制的数据。数据以rel_book1 rel_book2 rel_book3 ...的格式存储，其中每本书都与查询的Book对象相关，每个对象都有n相关的书籍，但至少总是有两本。

myproject.templates.search.html:

<form action="" method="get">
<label for="id_q">Search:</label>
<input id="id_q" name="q" type="text">
<input type="submit" value="Submit">

{% if found_entries %}
    <ul>
        {% for i in found_entries %}
            {{ i.uid }} {{ i.title }} {{ value|linebreaks }}
        {% endfor %}
    </ul>
{% endif %}
</form>

这就是我想显示图表的地方；按下文本链接时在新窗口中显示。

myapp.views.py：

from django.shortcuts import render_to_response
from django.template import RequestContext
from myapp.search import get_query
from myapp.models import Book

def search(request):
    query_string = ''
    found_entries = None

    if ('q' in request.GET) and request.GET['q']:
        query_string = request.GET['q']
        found_entries = Book.objects.filter(uid=query_string)

    return render_to_response('search.html',
                        { 'query_string': query_string, 'found_entries': found_entries },
                          context_instance=RequestContext(request))

因此，重申一下，用户输入给定书籍的唯一 ID，并显示与该书籍相关的数据库内容。在显示 ID 和标题的那一刻，我还想显示一个指向有向图示例的链接。

所以我的问题是，当查询 Book 模型时，我将如何从字段 related_books 中提取信息，以便我可以将这些数据推送到图形示例中，为生成的每个 Book 对象生成图形？

感谢您对我的包容！

Answer 1

在我看来，您已经掌握了足够的信息。您的视图返回与过滤器匹配的书籍对象，并且related_books 是 Book 类的成员。

您只需要通过迭代每本书的related_books 属性来动态生成一个链接，例如

{% for book in found_entries %}
# print out whatever results here
<a href="graphing_page.html?contents=
    {% for content in book.related_books %}content{% endfor %}
">Graph this</a>
{% endfor %}

我不确定 d3 库采用什么参数，但连接组件的列表似乎是合理的。