D3.js将对象绑定到数据并附加到每个键 [英] D3.js binding an object to data and appending for each key

问题描述

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

I'm a D3.js newbie and I'm learning how to play around with data.

假设我有一个名称为键的对象，每个键都有一个这样的数字数组：

Let's say I have an object with names as keys, and each key has an array of numbers like this:

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对象，值。

For each user, I would like to append an SVG object and then plot the line with the array of values for that user.

这里是我基于教程的假设，但我知道它是不正确的。这是为了显示我有限的知识，并更好地了解我在做什么：

So here is my assumption of how that would look based on tutorials, but I know it is incorrect. This is to show my limited knowledge and give better understanding of what I'm doing:

首先我应该创建一行

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

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

Then I want to bind the data to my body and append an svg element for each key:

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

所以我关闭了

推荐答案

这里是另一个类似mbeasley的例子： http://jsfiddle.net/2N2rt/15/添加轴，颜色，并将图表右侧向上翻转。首先，我按摩你的数据只是一点点。如果你有一个值数组，并且我使用键来获得名称和值属性更好。

Here's another example similar to mbeasley's: http://jsfiddle.net/2N2rt/15/ which adds axis, colors, and flips the chart right side up. First, I massaged your data just a little bit. Works the best if you have an array of values and I used keys to make getting to the name and values properties easier.

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 像这样决定实际图形的尺寸和周围的边缘。

Generally in d3 you set up the chart like this which determines the size of the actual graph and the surrounding margins.

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

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

Then you can create your scales based on your data. Though you don't have to create them, they make positioning elements on the chart much easier by converting values to points. The domain is the min and max values that your data has, while the range is the min and max values of the size of your graph. Note that the range for the y axis gets reversed which puts (0,0) in the bottom left hand corner (usually 0 for the y axis is at the top).

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个颜色选项）设置。

d3 has a couple of features for automatically creating color scales for you. Just set it up with the keys that you want to use and the number of colors (I think there are 10 and 20 color options).

var color = d3.scale.category10()
    .domain(d3.keys(data[0]).filter(function(key) { return key === "name"; }));

这里我们使用我们的尺度来设置x和y轴。轴有很多不同的选项。 TickFormat很方便改变tick的外观， d3.format 有很多不同的选项，所以你很少需要创建一个自定义格式化程序。

Here we use our scales to setup the x and y axis. There are lots of different options for the axes. TickFormat is handy to change how the ticks look, d3.format has lots of different options so that you rarely have to create a custom formatter.

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

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

这里我们创建一个可重用的函数，知道如何画一条线。我们将每个人的每个数据点传递给后面的行函数。请注意， d 保存了我们绘制的当前值的集合， i 是我们当前值的索引原始数据数组。

Here we create a reusable function that knows how to draw a line. We'll pass each datapoint for each person into the line function later on. Note that d holds the current set of values that we are graphing and i is the index of the current values within our original data array.

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

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

Finally we can start adding things to our chart, first creating and positioning the main svg element.

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 ，以便我们可以稍后对图表进行样式设置。

We append a group (g) for each person and associate the data with the group. We'll use this data when we draw the lines. We provide a class so that we can style the chart later if we want to.

  var people = svg.selectAll(".people")
      .data(data)
    .enter().append("g")
      .attr("class", "people");

然后最后为每个人绘制线条。

Then finally draw the lines for each person.

  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/ 上查看该图表。

I used your data to answer another question about drawing a grid when you have negative values. You can see that graph at http://jsfiddle.net/2y3er/2/.

这篇关于D3.js将对象绑定到数据并附加到每个键的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！