Д3.преобразование ключа и значений nest() в name и children

Я работаю над созданием Treemap из csv-файла. Данные в csv-файле иерархичны, в результате я использовал d3.гнездиться.)( Однако результирующий JSON имеет вид {key: "United States", values: [...]} Масштабируемая карта деревьев e.g (http://mbostock.github.io/d3/talk/20111018/treemap.html) требуется иерархия как {name: "United States", children:[...]}. Я попытался заменить имя и детей на ключ и значения в Примере, но это не работает. Если кто-то уже рассмотрено использование ключа и значений на масштабируемой карте дерева, пожалуйста, помогите. Я новичок в D3, и я не знаю, d.children означает структуру или значение из данных.

это код для преобразования мировых континентов, регионов и стран из CSV в иерархию с помощью d3.

$ d3.csv("../Data/WorldPopulation.csv", function (pop) { var treeData= { "key": "World", "values": d3.nest() .key(function (d) { return d.Major_Region; }) .key(function (d) { return d.Region; }) .key(function (d) { return d.Country; }) .entries(pop) };

первые несколько строк результата:

 `[{"key":"AFRICA","values":[{"key":"Eastern Africa","values"
 [{"key":"Burundi","values":[.........`

Я не могу использовать масштабируемую карту дерева, потому что она требует имен и дочерних меток в json, а не ключа и ценности.

11
d3.js javascript treemap

3 ответов

лучший способ преобразовать гнездо в treemap-указать функцию доступа к детям с помощью Treemap.дети ().

в Примере масштабируемой карты дерева требуется не только "дети", но и "имя"и " размер". Вы можете сделать либо:

1) измените функции доступа этих свойств, чтобы продолжать использовать "ключ"и " значение".

давайте сменим исходный код.

1.1)строка 79 & 86:

 .style("fill", function(d) { return color(d.parent.name); });

 .text(function(d) { return d.name; })

заменить ".имя "с".YOUR_NAME_KEY"(т. е. ".ключ")

 .style("fill", function(d) { return color(d.parent.YOUR_NAME_KEY); });

 .text(function(d) { return d.YOUR_NAME_KEY; })

1.2) строка 47:

var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.size; });

добавьте строку, чтобы указать функцию доступа детей.(Я. e ".значения")

var treemap = d3.layout.treemap()
.round(false)
.size([w, h])
.sticky(true)
.value(function(d) { return d.YOUR_SIZE_KEY; })
.children(function(d){return d.YOUR_CHILDREN_KEY});

1.3) строка 97 & 51:

function size(d) {
  return d.size;
}

заменить ".размер" с ".YOUR_SIZE_KEY " (вы не упомянули в своем результирующем JSON)

function size(d) {
  return d.YOUR_SIZE_KEY;
}

P. S. Может что-то пропущено, вы должны проверить это самостоятельно.

2) конвертировать ваш JSON структура, соответствующая примеру с массив.map ().

8

я полностью согласен с @Anderson, что самый простой подход к этой проблеме-использовать treemap children(function) и .value(function) методы для указания имен свойств во вложенном наборе данных.

однако, a дубликат вопрос недавно был опубликован в котором спрашивающий специально просит о помощи с помощью Array.map подход. Вот оно:

на массив map(function) метод создает новый массив, в котором каждый элемент массива является результатом выполнения указанной функции на каждом элементе исходного массива. В частности, функция выполняется с тремя аргументами: элементом из исходного массива, индексом этого элемента и исходным массивом в целом. Для манипулирования именами свойств нам нужен только первый аргумент.

вложенные данные в исходном сообщении имеют три уровня, эквивалентные трем ключевым функциям. Поэтому нам понадобится трехуровневый функция отображения:

var treeData= { "key": "World", "values": 
        d3.nest()
        .key(function (d) { return d.Major_Region; })
        .key(function (d) { return d.Region; })
        .key(function (d) { return d.Country; })
        .entries(pop)
      };

var treeData2 = { "name": "World", "children":
        treeData.values.map( function(major){

            return { "name": major.key, "children": 
              major.values.map( function(region){

                 return { "name": region.key, "children": 
                   region.values.map(function(country){

                      return { "name": country.key, "children": country.values };

                   }) //end of map(function(country){
                 };

              }) //end of map(function(region){
            }; 

         }) //end of map(function(major){
      }; //end of var declaration

вы также можете реализовать это с рекурсивной функцией, что было бы особенно полезно, если бы у вас было намного больше уровней вложенности.

5

Эй, ребята, я думаю, я нашел довольно простое решение. Я выполнил очень хорошую вложенность большого набора данных (400 000 строк) для иерархической гистограммы очень упорядоченным способом. Он использует библиотеку подчеркивания и дополнительную функцию _.гнездо. Просто скачайте и включите две библиотеки, необходимые

"подчеркивают минут.Яш" "подчеркивать.гнездо.js"

затем использовать _.функция nest для создания структуры. Вот моя реплика:

var newdata = _.nest(data, ["Material", "StudyName"]);

"материальный" и "StudyName" - это столбцы, в которые я хочу сгруппировать свою структуру.

есть другие варианты использования этой функции, если вам нужно выполнить больше вещей, но я оставлю это так

0