个人中心
gpt4 book ai didi

javascript - D3.js 无法读取未定义的属性 'length'

转载 作者：行者123 更新时间：2023-11-29 21:38:29 25 4
gpt4 key购买 nike

我对 d3.js 和网络都很陌生。我想使用一个 csv 文件来绘制折线图，​​但我遇到了一些我无法真正修复的错误:

enter image description here

代码如下:

body,html{
	margin: 0;
	padding: 0;
	font-family: "Arial", sans-serif;
	font-size: 0.95em;
	text-align: center;
}
#chart{
	background-color: #F5F2EB;
	border: 1px solid #CCC;
}
.bar{
	fill: purple;
	shape-rendering: crispEdges;
}
.bar-label{
	fill: black;
	text-anchor: middle;
	font-size: 18px;
}
.axis path,
.axis line{
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
}
.gridline path,
.gridline line{
	fill: none;
	stroke: #ccc;
	shape-rendering: crispEdges;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Learning D3</title>
	<link rel="stylesheet" href="main.css">
	<script  type="text/javascript" src="d3.min.js"></script>
</head>
<body>
<!--Place all DOM elements here -->
<script>

var data= [
	d3.csv("refugee_data.csv", function(d) {
  return {
    /*year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
    make: d.Make,
    model: d.Model,
    length: +d.Length // convert "Length" column to number*/
		date: d.Year + "/" +d.Month,
		origin: d.Origin,
		asylum: d.Asylum,
		value: +d.Value
  };
}, function(error, rows) {
  console.log(rows);
})
];

var w = 800;
var h = 450;
var margin = {
	top: 58,
	bottom: 100,
	left: 80,
	right: 40
};
var width = w - margin.left - margin.right;
var height = h - margin.top - margin.bottom;

var svg = d3.select("body").append("svg")
			.attr("id", "chart")
			.attr("width", w)
			.attr("height", h);
var dateParser = d3.time.format("%Y/%B").parse;
var x = d3.time.scale()
		 .domain(d3.extent(data, function(d){
			var date = dateParser(d.date);
			return date;
		}))
		.range([0,width]);

var y = d3.scale.linear()
		.domain([0, d3.max(data, function(d){
			return d.value;
		})])
		.range([height,0]);

function plot(params){
		//enter()
		this.selectAll(".point")
				.data(params.data)
				.enter()
					.append("circle")
					.classed("point", true)
					.attr("r", 2);
		//Update
		this.selectAll(".point")
		.attr("cx", function(d){
			var date = dateParser(d.date);
			return x(date);
		})
		.attr("cy", function(d){
			return y(d.value);
		})

		//Exit()
		this.selectAll(".point")
		.data(params.data)
		.exit()
		.remove();
}
plot.call(chart, {
	data: data
})
</script>
</body>
</html>

这是我的 csv 的一部分，非常基础，所以我不明白为什么它不起作用。

庇护，起源，年，月，值

德国，阿富汗，2014 年 1 月，981德国，阿富汗，2014年2月，781德国，阿富汗，2014年3月，675德国，阿富汗，2014年4月，673德国，阿富汗，2014年5月，523德国，阿富汗，2014年6月，621德国，阿富汗，2014年7月，752德国，阿富汗，2014年8月，743德国,阿富汗,2014,9月,922

我认为这是一个非常愚蠢的错误，你能帮帮我吗？

最佳答案

您的错误是假设调用 d3.csv(...) 返回您的 CSV 数据。

d3.csv 进行 AJAX 调用以加载您的数据，然后在加载数据后调用回调函数。当数据在后台加载时，您的代码会继续运行。当您编写 var data = [d3.csv(...)] 时，data 不包含从 CSV 文件加载的数据，它仅包含一个 d3 对象，你无法绘制它。

相反，您对 d3.csv 的调用应如下所示:

d3.csv("refugee_data.csv", function(d) {
  return {
        date: d.Year + "/" +d.Month,
        origin: d.Origin,
        asylum: d.Asylum,
        value: +d.Value
  };
}, function(error, rows) {
  console.log(rows);
  render(rows);
});

其中 render 是 d3 将在数据加载完成后调用以绘制图形的函数。

我创建了一个 render 函数，其中包含从 var w = 800; 行到 var y = ... 开头的代码内容，然后是 plot 函数的内容。我还将 this.selectAll 替换为 svg.selectAll，并删除了 plot.call 的使用。我编写的 render 函数最终如下所示:

function render(data) {
    var w = 800;
    var h = 450;
    var margin = {
        top: 58,
        bottom: 100,
        left: 80,
        right: 40
    };
    var width = w - margin.left - margin.right;
    var height = h - margin.top - margin.bottom;

    var svg = d3.select("body").append("svg")
                .attr("id", "chart")
                .attr("width", w)
                .attr("height", h);
    var dateParser = d3.time.format("%Y/%B").parse;
    var x = d3.time.scale()
             .domain(d3.extent(data, function(d){
                var date = dateParser(d.date);
                return date;
            }))
            .range([0,width]);

    var y = d3.scale.linear()
            .domain([0, d3.max(data, function(d){
                return d.value;
            })])
            .range([height,0]);   

        //enter()
        svg.selectAll(".point")
                .data(data)
                .enter()
                    .append("circle")
                    .classed("point", true)
                    .attr("r", 2);
        //Update
        svg.selectAll(".point")
        .attr("cx", function(d){
            var date = dateParser(d.date);
            return x(date);
        })
        .attr("cy", function(d){
            return y(d.value);
        })

        //Exit()
        svg.selectAll(".point")
        .data(data)
        .exit()
        .remove();
}

进行这些更改后，我能够看到您的图表正在运行。

关于javascript - D3.js 无法读取未定义的属性 'length'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34107705/

25 4 0
文章推荐： mysql - 如何检查记录不包含特定字符串？
文章推荐： java - 实现Rest Api JAVA客户端android eclipse
文章推荐： android - 点击标记打开警报 [maps v2]
文章推荐： javascript - D3.js csv 交互过滤器
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com