d3.js: Как добавить ключ данных? - PullRequest
Новая
       25

d3.js: Как добавить ключ данных?

3 голосов
/ 12 марта 2012

Я изучаю D3.js и пытаюсь разобраться ключи данных , используемые с потоковыми графиками. Я хотел бы адаптировать официальный пример :

enter image description here

... чтобы каждый путь имел явный ключ данных и чтобы при наведении курсора вводился ключ данных.

Официальный пример добавляет пути следующим образом: 

var area = d3.svg.area()
   .x(function(d) { console.log('x', d.data); return d.x * w / mx; })
   .y0(function(d) { return h - d.y0 * h / my; })
   .y1(function(d) { return h - (d.y + d.y0) * h / my; });
vis.selectAll("path")
 .data(data0) 
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area);

Я попытался адаптировать код следующим образом, но я не уверен, как изменить структуру data0 (в настоящее время это массив массивов), чтобы добиться того, что я хочу: 

vis.selectAll("path")
 .data(data0, function(d) { return d.name }) // Add key function
 .enter().append("path")
 .style("fill", function() { return color(Math.random()); })
 .attr("d", area)
 .on("mouseover", function (d,i) { 
     console.log("mouseover", d.name); // Log name property on mouseover
  });

В нынешнем виде, без внесения каких-либо изменений в структуру data0, неудивительно, что он не работает. Как я могу добавить свойство name к data0, не нарушая при этом функции area и .data()?

ОБНОВЛЕНИЕ: чтобы быть немного яснее: в документах D3 говорится, что функция области ожидает двумерный массив . Поэтому, если я изменю data0 с двумерного массива на массив объектов, каждый с ключом name и ключом data, как я могу изменить то, что я передаю area?

Ответы [ 2 ]

6 голосов
/ 12 марта 2012

Данные в примере не имеют свойства "name", поэтому вам нужно добавить это к данным , чтобы использовать его.Ключи данных, на которые вы ссылаетесь, используются при объединении / обновлении данных, т.е. вы уже нарисовали некоторые пути, а затем обновили (некоторые из них).Функция .data() попытается выяснить, какие данные обновляются, а какие - новые.Если это не работает для вас, вы можете использовать ключ данных, чтобы помочь ему, т.е. в вашем случае скажите ему, что вещи с одинаковым именем - это одни и те же данные.

0 голосов
/ 19 апреля 2012

Если то, что вы подразумеваете под ключами данных, это «легенды данных», то вы можете взглянуть на следующие примеры, в которых я полностью разделил размещение величин, маркеров легенды и текста легенды в разных областях диаграмм. .

В каждом из примеров вы ясно увидите, как данные маркируются, структурируются, передаются и используются.

Я также связал их вместе с помощью событий mouseover и mouseout, так что при наведении курсора на любой элемент или вне него все элементы в наборе изменяют цвет одновременно.

Надеюсь, это поможет.

Frank

...