Question

我是D3.js的新手，我正在学习如何玩数据。

假设我有一个名称为键的对象，每个键都有一个数字数组，如下所示：

var userdata = {
    'John' : [0, 1, 3, 9, 8, 7],
    'Harry': [0, 10, 7, 1, 1, 11],
    'Steve': [3, 1, 4, 4, 4, 17],
    'Adam' : [4, 77, 2, 13, 11, 13]
};

对于每个用户，我想附加一个SVG对象，然后用该用户的值数组绘制该行。

所以这是我对基于教程的看法的假设，但我知道这是不正确的。这是为了展示我有限的知识，并更好地理解我正在做的事情：

首先我应该创建一行

var line = d3.svg.line().interpolate('basis');

然后我想将数据绑定到我的身体并为每个键附加一个svg元素：

d3.select('body')
    .selectAll('svg')
    .data(userdata)
    .enter()
    .append('svg')
    .append(line)
    .x(function(d, i) { return i; })
    .y(function(d) { return d[i]; });

所以我结束了吗？

Answer 1

这是另一个类似于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]}
];

通常在d3中设置图表，这样可以确定实际图表的大小和周围的边距。

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 640 - margin.left - margin.right,
    height = 380 - margin.top - margin.bottom;

然后，您可以根据数据创建比例。虽然您不必创建它们，但通过将值转换为点，它们可以更轻松地在图表上创建定位元素。 domain是数据的最小值和最大值，而range是图表大小的最小值和最大值。请注意，range的{{1}}被反转，其中（0,0）位于左下角（y轴通常为0，位于顶部）。

y axis

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]);有一些功能可以自动为您创建色阶。只需使用您想要使用的按键和颜色数量进行设置（我认为有10种和20种颜色选项）。

d3

这里我们使用我们的比例来设置x和y轴。轴有许多不同的选项。 TickFormat可以方便地更改刻度的外观，var color = d3.scale.category10() .domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));有很多不同的选项，因此您很少需要创建自定义格式化程序。

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是原始数据数组中当前值的索引。

最后，我们可以开始向图表添加内容，首先创建和定位主svg元素。

var line = d3.svg.line()
    .interpolate("basis")
    .x(function(d, i) { return x(i); })
    .y(function(d, i) { return y(d); });

然后附加每个轴。

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");

当您有负值时，我使用您的数据回答有关绘制网格的另一个问题。您可以在http://jsfiddle.net/2y3er/2/找到该图表。

Answer 2

我会说你正朝着正确的方向前进。这就是我要做的事情（但知道不只有一种方法可以做到这一点）：

// your user data
var userdata = {
    'John' : [0, 1, 3, 9, 8, 7],
    'Harry': [0, 10, 7, 1, 1, 11],
    'Steve': [3, 1, 4, 4, 4, 17],
    'Adam' : [4, 77, 2, 13, 11, 13]
}; 

// add your main SVG block
var svg = d3.select('body')
    .append('svg')
    .attr('width', 400)
    .attr('height', 200)
    .attr('id', 'chart');

// add an SVG group element for each user
var series = svg.selectAll('g.series')
    .data(d3.keys(userdata))
    .enter()
    .append('g')
    .attr('class', 'series');

// create your line generator
var line = d3.svg.line()
    .interpolate('basis')
    .x(function(d, i) {
        return i*40; // *40 just to increase the chart size
    })
    .y(function(d) {
        return d*3; // *3 for the same reason
    });

// add a line for each user using your SVG grouping 
var lineSVG = series.selectAll('.line')
    .data(d3.keys(userdata))
    .enter()
    .append('svg:path')
    .attr('d', function(d) {
        return line(userdata[d]);  
    })
    .attr('class','line');

Here's a demo上述代码。

我还强烈建议您阅读this article，因为它确实有助于巩固d3的工作方式。

D3.js将对象绑定到数据并附加到每个键

2 个答案: