D3.js 绘制D3矩形
我是D3和JS的初学者。 我试图用一个小的csv文件做一个简单的矩形可视化D3.js 绘制D3矩形,d3.js,D3.js,我是D3和JS的初学者。 我试图用一个小的csv文件做一个简单的矩形可视化 price, units 80.67, 100 80.87, 99 79.34, 47 文件、csv位于同一文件夹中。 我正在使用Python的SimpleHTTPServer在此文件夹中本地提供服务 这是我的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <tit
price, units
80.67, 100
80.87, 99
79.34, 47
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Data</title>
<script type="text/javascript" src="../d3/d3.v3.js"></script>
</head>
<body>
<script type="text/javascript">
// load csv from the same directory
d3.csv("test.csv", function (data){
return {
price: +data.price, // convert to number with +
units: +data.units, // convert to number with +
};
var canvas = d3.select("body").append("svg")
.attr("width", 500)
.attr("height", 500)
canvas.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width", function (d) { return d.price; })
.attr("height", 48)
.attr("y", function (d) { return d.units; })
.attr("fill", "blue");
canvas.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill", "white")
.attr("y", function (d) { return d.units + 24; })
.text( function (d) { return d.units;})
});
</script>
</body>
测试数据
//从同一目录加载csv
d3.csv（“test.csv”），函数（数据）{
返回{
价格：+data.price，//转换为数字+
单位：+data.units，//用+
};
var canvas=d3.select（“body”）.append（“svg”）
.attr（“宽度”，500）
.attr（“高度”，500）
canvas.selectAll（“rect”）
.数据（数据）
.输入（）
.append（“rect”）
.attr（“宽度”，函数（d）{返回d.price；}）
.attr（“高度”，48）
.attr（“y”，函数（d）{返回d.units；}）
.attr（“填充”、“蓝色”）；
canvas.selectAll（“文本”）
.数据（数据）
.输入（）
.append（“文本”）
.attr（“填充”、“白色”）
.attr（“y”，函数（d）{返回d.units+24；}）
.text（函数（d）{返回d.units；}）
});
这段代码有什么问题？在回调中要做的第一件事就是返回。之后的任何代码都不会被执行。我指的是
return {
price: +data.price, // convert to number with +
units: +data.units, // convert to number with +
};
data.forEach(function(d) {
d.price = +d.price;
d.units = +d.units;
});
回调的签名也应该是
function（error，data）function（data）