D3.js 有向图与 Django 集成

Question

我有一个简单的Django应用，它可以查询数据库并显示返回对象的字段。我在想，怎样把这个有向图的可视化效果整合到我的项目中，因为我之前从来没有用过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 ...，每本书都与查询到的书籍对象相关，每个对象至少有两个相关书籍。

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和标题，我还想显示一个指向有向图示例的链接。

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

谢谢你的耐心阅读！

Answer 1

我觉得你已经有足够的信息了。你的视图返回的是符合条件的书籍对象，而 related_books 是书籍类中的一个成员。

你只需要通过遍历每本书的 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 库需要什么参数，但连接组件的列表听起来是合理的。