让我的csv和d3正常工作
嘿,伙计们还在努力适应D3,可能听起来很基本。我使用了维基和其他一些帖子,但我认为我的一些东西可能已经过时了。我试着从我的csv文件中提取年份和MPG,并用x作为年份绘制散点图。我也不想快捷方式和修改的csv文件,因为我想学习如何做到这一点,无论有多少属性。我认为我遇到的部分问题是我代码的这一部分:让我的csv和d3正常工作,csv,d3.js,Csv,D3.js,嘿,伙计们还在努力适应D3,可能听起来很基本。我使用了维基和其他一些帖子,但我认为我的一些东西可能已经过时了。我试着从我的csv文件中提取年份和MPG,并用x作为年份绘制散点图。我也不想快捷方式和修改的csv文件,因为我想学习如何做到这一点,无论有多少属性。我认为我遇到的部分问题是我代码的这一部分: d3.csv("data.csv", function(data) { dataset = data.map(function(d) { return [ +d["Year"], +d["MPG
d3.csv("data.csv", function(data) {
dataset = data.map(function(d) { return [ +d["Year"], +d["MPG"] ]; });
});
x.domain(d3.extent(data, function(d) { return d.Year; })).nice();
y.domain(d3.extent(data, function(d) { return d.MPG; })).nice();
但我会让你们来判断。这就是我到目前为止所做的:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.dot {
stroke: #000;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.range([0, width]);
var y = d3.scale.linear()
.range([height, 0]);
var color = d3.scale.category10();
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("data.csv", function(data) {
dataset = data.map(function(d) { return [ +d["Year"], +d["MPG"] ]; });
});
x.domain(d3.extent(data, function(d) { return d.Year; })).nice();
y.domain(d3.extent(data, function(d) { return d.MPG; })).nice();
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.append("text")
.attr("class", "label")
.attr("x", width)
.attr("y", -6)
.style("text-anchor", "end")
.text("Year");
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("class", "label")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("MPG")
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.Year); })
.attr("cy", function(d) { return y(d.MPG); })
.style("fill", function(d) { return color(d.species); });
var legend = svg.selectAll(".legend")
.data(color.domain())
.enter().append("g")
.attr("class", "legend")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("x", width - 18)
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", width - 24)
.attr("y", 9)
.attr("dy", ".35em")
.style("text-anchor", "end")
.text(function(d) { return d; });
});
</script>
身体{
字体:10px无衬线;
}
.轴线路径,
.轴线{
填充:无;
行程:#000;
形状渲染:边缘清晰;
}
多特先生{
行程:#000;
}
var margin={顶部:20,右侧:20,底部:30,左侧:40},
宽度=960-margin.left-margin.right,
高度=500-margin.top-margin.bottom;
var x=d3.scale.linear()
.范围([0,宽度]);
变量y=d3.scale.linear()
.范围([高度,0]);
var color=d3.scale.category10();
var xAxis=d3.svg.axis()
.比例(x)
.东方(“底部”);
var yAxis=d3.svg.axis()
.比例(y)
.东方(“左”);
var svg=d3.选择(“正文”).追加(“svg”)
.attr(“宽度”,宽度+边距。左侧+边距。右侧)
.attr(“高度”,高度+边距。顶部+边距。底部)
.附加(“g”)
.attr(“转换”、“平移”(+margin.left+)、“+margin.top+”);
d3.csv(“data.csv”),函数(数据){
dataset=data.map(函数(d){return[+d[“Year”],+d[“MPG”];});
});
x、 domain(d3.extent(数据,函数(d){returnd.Year;})).nice();
y、 domain(d3.extent(数据,函数(d){return d.MPG;})).nice();
svg.append(“g”)
.attr(“类”、“x轴”)
.attr(“变换”、“平移(0)”、“高度+”)
.呼叫(xAxis)
.append(“文本”)
.attr(“类别”、“标签”)
.attr(“x”,宽度)
.attr(“y”,-6)
.style(“文本锚定”、“结束”)
.文本(“年份”);
svg.append(“g”)
.attr(“类”、“y轴”)
.呼叫(yAxis)
.append(“文本”)
.attr(“类别”、“标签”)
.attr(“变换”、“旋转(-90)”)
.attr(“y”,6)
.attr(“dy”,“.71em”)
.style(“文本锚定”、“结束”)
.文本(“MPG”)
svg.selectAll(“.dot”)
.数据(数据)
.enter().append(“圆”)
.attr(“类”、“点”)
.attr(“r”,3.5)
.attr(“cx”,函数(d){返回x(d.Year);})
.attr(“cy”,函数(d){返回y(d.MPG);})
.style(“fill”,function(d){返回颜色(d.species);});
var legend=svg.selectAll(“.legend”)
.data(color.domain())
.enter().append(“g”)
.attr(“类”、“图例”)
.attr(“transform”,函数(d,i){return“translate(0,+i*20+”);});
图例。追加(“rect”)
.attr(“x”,宽度-18)
.attr(“宽度”,18)
.attr(“高度”,18)
.样式(“填充”,颜色);
图例。追加(“文本”)
.attr(“x”,宽度-24)
.attr(“y”,9)
.attr(“dy”,“.35em”)
.style(“文本锚定”、“结束”)
.text(函数(d){return d;});
});
我的csv文件如下所示:
汽车,制造商,MPG,气缸,排量,马力,重量,加速度,车型年,原产地
chevelle malibu,雪佛兰,18,83071303504,12,70,美国
云雀320,别克,15,83501653693,11.5,70,美国
卫星,普利茅斯,18,83181503436,11,70,美国
叛军sst,amc,16,83041503433,12,70,美国
都灵,福特,17,83021403449,10.5,70,美国必须添加适当的函数,让它从服务器读取csv文件并输入我希望它获取的变量。csv
d3.csv
是异步的。您需要将使用dataset
的所有代码放在回调中。