从 Django 到 D3 图的 JSON 数据答案

【问题标题】：JSON data from Django to D3 graph从 Django 到 D3 图的 JSON 数据
【发布时间】：2012-10-14 14:00:58
【问题描述】：

我正在尝试编辑 D3 条形图 http://bl.ocks.org/3885304 以适应来自 Django 的 JSON 数据。我在 Django 中生成了一个 JSON 格式的变量： [{"score": 1, "color": "blue"}, {"score": 5, "color": "green"}, {"score": 3, "color": "red"} etc. 所以我想在 x 轴上的颜色和在 y 轴上的分数。

有什么方法可以在 HTML 模板中实现 Django 变量，而无需创建 tsv 或 csv 文件？

【问题讨论】：

标签： javascript html django templates d3.js

【解决方案1】：

将数据转换为正确的格式并准备就绪通常是您在模型中执行的操作。这是一个简单的假设示例：

# In models.py:
class Address(models.Model):
    street = models.CharField(max_length=200)
    city = models.CharField(max_length=200)
    state = models.CharField(max_length=200)
    def get_full_address(self):
        return self.street + "\n" + self.city + ", " + self.state

现在在您的视图中，将模型实例传递给模板：

return render(request, 'address.html', {'address': address_object})

在模板中：

{{ address.get_full_address }}

... 将返回文本格式的地址。

所以，如果我想将它提供给 JavaScript jQuery 函数（再次，用于假设演示），我可以说：

<span id="address_label"></span>
<script>
    ...
    $("#address_label").html("{{ address.get_full_address }}");
    ...
</script>

【讨论】：

如何在上面的D3 html中实现{%address.get_full_address %}来模拟条形图？我对将 Django 集成到该 D3 html 模板中感兴趣。
我只需将您的部分添加到 HTML 中而不删除任何内容即可使图表正常工作？抱歉，我对 JavaScript 完全陌生。
Django 的模板引擎只是提供了一个字符串。该字符串可用于您希望的任何 JavaScript 函数。因此，例如，您可以在模型中创建一个名为“my_tsv_format_helper_function”的函数，以便以 TSV 格式呈现数据。然后，在您的模板中，您可以使用 d3.tsv.parse({{ data.my_tsv_format_helper_function }}) 获取该字符串。您还可以选择通过 URL 和其他数据格式（如 CSV 或 JSON）获取数据。 github.com/mbostock/d3/wiki/CSV#wiki-tsv_parse
明白了。我希望有一种方法可以绕过创建 csv 或 tsv 文件。有没有办法直接将数据发送到 d3 html？否则我将不得不不断地写入和读取文件。
您可以通过 URL 获取数据。从来没有创建文件的地方，所以我不太明白你的意思。数据确实写入网页。数据永远不会包含在具有文件名的磁盘上的单个单独文件中。