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

我是一名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]; });

---

那么我就接近了吗？？？

我想说你走的方向是正确的。以下是我将要做的（但要知道，这不是唯一的方法）：

以上代码的一部分

---

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

这里有另一个类似于姆贝斯利的例子：它添加轴、颜色，并将图表向右翻转。首先，我只是稍微整理了一下你的数据。如果您有一个值数组，并且我使用了键使访问

名称

和

值

属性更容易，那么效果最好

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;

然后，您可以根据数据创建比例。虽然您不必创建它们，但通过将值转换为点，它们使图表上的元素定位更加容易。

域

是数据的最小值和最大值，

范围

是图形大小的最小值和最大值。请注意，

y轴的
范围
反转，将（0,0）置于左下角（通常y轴的0位于顶部）

d3
有两个功能可以自动为您创建色阶。只需设置你想要使用的按键和颜色的数量（我认为有10和20种颜色选项）

在这里，我们使用比例设置x轴和y轴。轴有许多不同的选项。TickFormat可以方便地更改记号的外观，
d3。format
有许多不同的选项，因此您很少需要创建自定义格式设置程序

var xAxis = d3.svg.axis()
    .scale(x)
    .tickFormat(d3.format('d'))
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

这里我们创建一个可重用函数，它知道如何画一条线。稍后，我们将把每个人的每个数据点传递到line函数中。请注意，
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
），并将数据与该组关联。我们在画线的时候会用到这些数据。我们提供了一个
类
，以便我们可以在以后根据需要设置图表样式

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

我用你的数据回答了另一个关于当你有负值时绘制网格的问题。您可以在中看到该图。
这是一个非常好的示例，将我在示例中使用的通用线条生成进一步，以创建一个完全样式化的图表。干得好！我注意到的一件事是，您更改了我对象的布局。相反，您有一个包含4个对象的数组，而我有一个包含4个属性的对象。在发布这个问题（）后不久，我观看了一段视频，其中谈到了总是这样放置我的数据。我想我需要重做我的函数如何工作。另外，非常感谢@Bill。您现在已经回答了我的两个D3.js问题！再见！将数据强制转换为更易于使用d3.js的表单总是非常容易的。通常，您需要获得某种类型的值数组。看看。@Bill-我在这里用同样的情节提出了一个新问题：谢谢这篇文章，似乎很多人都建议大家读这篇文章。
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

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