d3.js的预处理数据

Question

在很多场合，我只有几个数据点可以通过d3.js显示出来。在这些情况下，我认为在主静态请求中已经发送这些数据点是有意义的，而不是稍后通过ajax动态加载它们。

这意味着，我会将数据保存在像这样的

的javascript变量中

var data = ... ;

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

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

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

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>