对d3.js进行数据预处理

在很多情况下，我只有几个数据点要通过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];}

还是这是一个坏的风格?

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>