【发布时间】：2014-09-14 07:31:51
【问题描述】：
如果这似乎是重复，我深表歉意。我见过很多类似的线程，但似乎没有一个能解决我遇到的确切问题。
我需要为一个班级创建一个多系列折线图。我不精通 javascript 并且对 D3 完全陌生，所以我正在尽我所能解决这个问题。我从这个例子开始：http://bl.ocks.org/mbostock/3884955
我将代码复制到编辑器中，我真正要做的就是将时间刻度的格式更改为四位数年份（这似乎有效），重命名变量“城市”和“城市”到“类别”和“类别”，并用“百分比”重新标记温度轴。
这是我的代码：
<body>
<script src="http://d3js.org/d3.v3.js"></script>
<script>
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
//Change date format to four digit year.
var parseDate = d3.time.format("%Y").parse;
//x and y axes
var x = d3.time.scale()
.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 line = d3.svg.line()
//change from "basis" to "linear"
.interpolate("basis")
.x(function(d) { return x(d.date); })
//changed d.temperature to d.percent
.y(function(d) { return y(d.percent); });
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.tsv("data.tsv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "date"; }));
data.forEach(function(d) {
d.date = parseDate(d.date);
});
//changied variable "cities" to "categories"
var categories = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
//changed below to percent
return {date: d.date, percent: +d[name]};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
//changed "cities" to "categories"
y.domain([
//Temp to percent
d3.min(categories, function(c) { return d3.min(c.values, function(v) { return v.percent; }); }),
d3.max(categories, function(c) { return d3.max(c.values, function(v) { return v.percent; }); })
]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
//Changed Temperature to percent for label
.text("Percent (%)");
//Changed "city" to "category" and "cities" to "categories"
var category = svg.selectAll(".category")
.data(categories)
.enter().append("g")
.attr("class", "category");
category.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
category.append("text")
.datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; })
.attr("transform", function(d) { return "translate(" + x(d.value.date) + "," + y(d.value.percent) + ")"; })
.attr("x", 3)
.attr("dy", ".35em")
.text(function(d) { return d.name; });
});
</script>
我知道这很多 - 几乎所有内容。我只是不知道问题出在哪里。如果有人愿意看这个，我将非常感激。这是我当前图表所在位置的链接：http://www.pitt.edu/~kac232/hmwrk1ptA_test.html
目前，发生的事情是我缺少一个类别的行，而且我的路径完全笔直，whigh 对我来说毫无意义。我希望他们至少会错开一点。
谢谢！
【问题讨论】：