d3.js 的预处理数据

Question

在很多情况下，我只有几个数据点需要通过 d3.js 进行可视化。在这些情况下，我认为已经在主静态请求中发送这些数据点是有意义的，而不是稍后通过 ajax 动态加载它们。

这意味着，我会将数据保存在这样的 javascript 变量中

var data = ... ;

d3.js 的大部分基本示例都依赖于这样的数据结构：

{[  
    {"key1" : "val11", "key2" : "val21"},
    {"key1" : "val12", "key2" : "val22"},
    ...
]}

因为在处理数据/标签的每个函数中，d3 使用.-notation

function(d){return d.key1;}

我通过删除

修改基本的 d3.js 示例来实现此结构

d3.tsv("data.tsv", function(error, data) {});

循环，因为我的数据已经在 dom 中了。

现在的问题是：

如何使用模板语言来确保数据格式正确？

PHP 示例

我在服务器端的用例是，我生成一个具有如下值的数组：

$dbresult = dbqueryfunction();
$respone = array();
foreach($dbresult as $key => $value){
    if(!array_key_exists($value->column1,$response))
        $response[$value->column1] = 0;
    $response[$value->column1] += someMath($value->column2);

这是对 column1 的分组。为了输出这个我做

var data = <?php echo json_encode($response); ?> ;

但这意味着，我必须在客户端再次迭代数据，以实现所需的结构（例如使用 jQuery）：

var dataJS = new Array();
$.each(dataPHP, function(phpKeys, phpVals){
    dataJS.push({"key1" phpKeys: , "key2" : phpVals});
})

示例 Django

在 Django 中问题不同，因为响应是在字典中发送的，而不是在数组中：

response = defaultdict(int)
dbresult = stats.SomeModule.objects.all()
for val in dbresult:
    response[val.c1] += someMath(val.c2)

这意味着，我要么使用

return render(request, "someTemplate.html" , {"data" :  repr(response)})

在模板中

    {% autoescape off %}
var data = {{ data }};
{% endautoescape %} 

或者我使用

return render(request, "someTemplate.html" , {"data" :  response})

再次进入模板

var data = {"content": [
        {% for di,value in data %}
             {"key1": "{{ di }}", "key2": "{{ value }}" },
         {% endfor %}           
        ]
    };
data = data.content;

如您所见，我尝试了很多东西，但仍然不确定：继续实现 d3.js 标准所需数据结构的最佳方法是什么？

编辑：

我还考虑过以不同的方式使用 d3.js 函数，因为一个也有 function(d,i){};，所以总是可以使用索引来访问数据，例如：

function(d,i){return data.key1[i];}

或者这是一种不好的风格？

Answer 1

如果您只是从模型中获取一些数据，您可以这样做。

查看

import json

def view(request):

    stats = stats.SomeModule.objects.all().values("id","value")
    # returns a list of dicts => [{"id":__,"value":__},...]

    return render(request, "someTemplate.html" , {"data": json.dumps(stats)})

模板

<script>var data = {{ data|safe }}</script>