d3 csv 数据加载 [英] d3 csv data loading

查看：38 发布时间：2021/12/18 19:14:03 javascript html csv d3.js

本文介绍了d3 csv 数据加载的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在 D3 中调整一个简单的散点图程序以接受 CSV 文件.当我使用文件中的数据时，它工作得很好，但是当我尝试加载 CSV 文件时，它根本无法工作.我错过了一些简单的东西吗?CSV 文件datatest.csv"的内容与代码中的数据集相同.我已经检查过浏览器是否正在加载数据，它似乎都在那里.我想我只是错过了一步.

<html lang="zh-cn"><头><meta charset="utf-8"><title>D3 Demo:线性比例</title><script type="text/javascript" src="../d3/d3.v3.js"></script><style type="text/css">/* 这里还没有样式规则 */</风格><身体><script type="text/javascript">//宽度和高度无功w = 900；无功h = 500；无功填充= 20;var 数据集 = [];//var 数据集 = [//[5, 20], [480, 90], [250, 50], [100, 33], [330, 95],//[410, 12], [475, 44], [25, 67], [85, 21], [220, 88],//[600, 150]//];d3.csv(数据测试.csv"，函数(数据){数据集=数据});//创建缩放函数var xScale = d3.scale.linear().domain([0, d3.max(dataset, function(d) { return d[0]; })]).range([padding, w - padding * 2]);var yScale = d3.scale.linear().domain([0, d3.max(dataset, function(d) { return d[1]; })]).range([h - padding, padding]);var rScale = d3.scale.linear().domain([0, d3.max(dataset, function(d) { return d[1]; })]).range([2, 5]);//创建SVG元素var svg = d3.select("body").append("svg").attr("宽度", w).attr("高度", h);svg.selectAll("圆").data(数据集).进入().append("圆圈").attr(cx"，函数(d){返回 xScale(d[0]);}).attr(cy"，函数(d){返回 yScale(d[1]);}).attr(r"，函数(d){返回 rScale(d[1]);});

这是 CSV 文件的内容:

x 坐标，y 坐标5,20480,90250,50100,33330,95410,12475,4425,6785,21220,88600,150

解决方案

重要提示:

虽然这里的答案有效，但有一个内置方法 d3.csv.parseRows() 可以实现相同的结果.为此，请参阅@ryanmt 的回答(也在此页面上).但是，请记住，无论您使用哪种方法，如果您的 CSV 中有数字，那么您需要将它们从字符串转换为 javascript 数字.您可以通过在解析值前加上 + 来实现.例如，在我在这里提供的解决方案中——它不使用 parseRows()——这种转换是通过 +d["x-coordinate"] 实现的.>

答案:

CSV 解析器生成对象数组，而不是您需要的数组数组.它看起来像这样:

<预><代码>[{x 坐标":5"，y 坐标":20"}，{x 坐标":480"，y 坐标":90"}，{x 坐标":250"，y 坐标":50"}，{x 坐标":100"，y 坐标":33"}，...]

要转换它，你需要使用一个map()函数:

d3.csv("datatest.csv", function(data) {数据集 = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; });});

(注意，map() 在旧版 IE 中不可用.如果这很重要，那么 d3、jQuery 等有很多解决方法)

I am trying to adapt a simple scatterplot program in D3 to accept a CSV file. When I use the data in the file it works just fine, but when I try to load the CSV file it simply won't work. Is there something simple I am missing? The contents of the CSV file "datatest.csv" are the same as the dataset in the code. I have checked that the browser is loading the data, and it seems to all be there. I figure I'm simply missing a step.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>D3 Demo: Linear scales</title>
    <script type="text/javascript" src="../d3/d3.v3.js"></script>
    <style type="text/css">
        /* No style rules here yet */       
    </style>
</head>
<body>
    <script type="text/javascript">

        //Width and height
        var w = 900;
        var h = 500;
        var padding = 20;
        var dataset = [];

//          var dataset = [
//                          [5, 20], [480, 90], [250, 50], [100, 33], [330, 95],
//                          [410, 12], [475, 44], [25, 67], [85, 21], [220, 88],
//                          [600, 150]
//                        ];

        d3.csv("datatest.csv", function(data) {
        dataset=data
        });



        //Create scale functions
        var xScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                             .range([padding, w - padding * 2]);

        var yScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([h - padding, padding]);

        var rScale = d3.scale.linear()
                             .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                             .range([2, 5]);

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        svg.selectAll("circle")
           .data(dataset)
           .enter()
           .append("circle")
           .attr("cx", function(d) {
                return xScale(d[0]);
           })
           .attr("cy", function(d) {
                return yScale(d[1]);
           })
           .attr("r", function(d) {
                return rScale(d[1]);
           });
    </script>
</body>
</html>

This is the content of the CSV file:

x-coordinate, y-coordinate
5,20
480,90
250,50
100,33
330,95
410,12
475,44
25,67
85,21
220,88
600,150

解决方案

IMPORTANT:

While the answer here works, there's a builtin method d3.csv.parseRows(), which achieves the same result. For that, see @ryanmt's answer (also on this page). However, keep in mind that regardless of the method you use, if your CSV has numbers in it then you'll need to convert them from strings to javascript Numbers. You can do it by prefixing the parsed values with a +. For example, in the solution I provided here — which doesn't use parseRows() — that conversion is achieved via +d["x-coordinate"].

THE ANSWER:

The CSV parser produces an array of objects, rather than the array of arrays that you need. It looks like this:

[
  {"x-coordinate":"5"," y-coordinate":"20"},
  {"x-coordinate":"480"," y-coordinate":"90"},
  {"x-coordinate":"250"," y-coordinate":"50"},
  {"x-coordinate":"100"," y-coordinate":"33"},
  ...
]

To transform it, you need to use a map() function:

d3.csv("datatest.csv", function(data) {
  dataset = data.map(function(d) { return [ +d["x-coordinate"], +d["y-coordinate"] ]; });
});

(Note, map() is not available in older IE. If that matters, then there are plenty of workarounds with d3, jQuery, etc)

这篇关于d3 csv 数据加载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文

d3 csv 数据加载 [英] d3 csv data loading

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

d3 csv 数据加载 [英] d3 csv data loading

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭