Question

我有这个cvs

<script id="cur_data" type="text/csv">Russian Federation,Italy,France,Luxembourg,Greece,Japan,Others
293,302,91,7,7,7,53</script>

如何创建适合d3.js库的数组格式？

Answer 1

最好将它保存为异步加载的单独CSV文件。因此，请将您的数据保存在data.csv中，然后使用d3::csv()加载，如下所示：

d3.csv("data.csv", function(data){
    console.log(data);
});

如果确实希望它在<script>标记中，请将其放入数组或任何适当的数据结构中。

<script>
    var data = [
        {
            country: "Russian Federation",
            value: 293
        },
        {
            country: "Italy",
            value: 302
        },
        {
            country: "France",
            value: 91
        },
        {
            country: "Luxembourg",
            value: 7
        },
        {
            country: "Greece",
            value: 7
        },
        {
            country: "Japan"
            value: 7
        },
        {
            country: "Others",
            value: 53
        }
    ];
</script>

然后在d3.js具有的任何函数中使用数据。您通常不会使用<script>制作type="text/csv"个代码。你会使用text/javascript，因为它主要只用于JavaScript。见MDN script tag documentation

Answer 2

CSV不容易解析（可选引号，转义字符，分隔符未规范化（制表符，逗号，分号......））你应该使用一个库（d3有一个）

var csvSource = document.querySelector("#cur_data").textContent;
var data = d3.csv.parse(csvSource);

从csv创建一个数组以与D3.js库一起使用

2 个答案: