这是一个类似于mbeasley的另一个例子:http://jsfiddle.net/2N2rt/15/,它添加了坐标轴、颜色并将图表翻转过来。首先,我稍微调整了一下你的数据。如果您有一个值数组,那么使用键来更轻松地获取name
和values
属性会更好。
var data = [
{name: 'John', values: [0,1,3,9, 8, 7]},
{name: 'Harry', values: [0, 10, 7, 1, 1, 11]},
{name: 'Steve', values: [3, 1, 4, 4, 4, 17]},
{name: 'Adam', values: [4, 77, 2, 13, 11, 13]}
];
通常在中,您可以按照以下方式设置图表,以确定实际图形的大小和周围的边距。
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 640 - margin.left - margin.right,
height = 380 - margin.top - margin.bottom;
然后,您可以根据您的数据创建比例尺。虽然您不必创建它们,但是它们将通过将值转换为点来使图表中元素的定位更加容易。 domain
是您的数据具有的最小值和最大值,而 range
是您的图形大小的最小值和最大值。请注意,y轴
的 range
被反转,这将把(0,0)放在左下角(通常情况下,y轴的0在顶部)。
var x = d3.scale.linear()
.domain([0, d3.max(data, function(d) { return d.values.length - 1; })])
.range([0, width]);
var y = d3.scale.linear()
.domain([d3.min(data, function(d) { return d3.min(d.values); }),
d3.max(data, function(d) { return d3.max(d.values); })])
.range([height, 0]);
d3
有几个功能可以自动为您创建颜色比例尺。只需使用要使用的键和颜色数量进行设置(我想有10种和20种颜色选项)。
var color = d3.scale.category10()
.domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));
我们使用比例尺来设置X和Y轴。轴有许多不同的选项。 d3.format
可以方便地更改刻度线的外观,它有许多不同的选项,因此您很少需要创建自定义格式化程序。
var xAxis = d3.svg.axis()
.scale(x)
.tickFormat(d3.format('d'))
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
在这里,我们创建了一个可重用的函数来绘制一条线。稍后我们将把每个人的每个数据点传递到该线函数中。请注意,d
保存我们正在绘制的当前一组值,而i
是原始数据数组中当前值的索引。
var line = d3.svg.line()
.interpolate("basis")
.x(function(d, i) { return x(i); })
.y(function(d, i) { return y(d); });
最后,我们可以开始向图表中添加元素了,首先是创建并定位主svg元素。
var svg = d3.select("#chart").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 + ")");
然后将每个轴添加到其中。
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
我们为每个人附加一个组(g
),并将数据与该组关联。 在绘制线条时,我们将使用这些数据。 我们提供一个class
,以后如果需要,我们可以为图表设置样式。
var people = svg.selectAll(".people")
.data(data)
.enter().append("g")
.attr("class", "people");
最后为每个人画出相应的线条。
people.append("path")
.attr("class", "line")
.attr("d", function(d) { return line(d.values); })
.style("stroke", function(d) { return color(d.name); });
我使用了您的数据回答了另一个关于在存在负值时绘制网格的问题。您可以在http://jsfiddle.net/2y3er/2/上查看该图。