d3.js Tree - Назначить уникальный цвет родителям и их детям

Question

Я пытаюсь выбрать ветку my tree и назначить каждому (родительскому и двум уровням детей) уникальный цвет. В моем примере ниже изображены родительские узлы справа и leafnodes слева.

Мои иерархические данные имеют глубину в три уровня (название: «Специальность» >> имя: «Местоположение» >> LeafNode, содержащий «Поставщик», «Местоположение», «Специальность»). Я думаю, мне нужно проверить каждый объект Leafnode как путь рисуется -

d.source.children.children.children.Specialty == d.source.children.name 

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

var link = canvas.selectAll(".link") 
      .data(links) 
      .enter().append("path") 
      .attr("d", diagonal) 
      .attr("stroke-width", 1) 
      .attr("fill", "none") 
      .attr("stroke", function(d){ 
       return color(d.target.name == d.target.name ? d : "#111"); //<< huh? 
       }) 

Answer 1

Работа со структурой данных генерируется из макета дерева и кода, вы можете добиться того, что вы после того, как с некоторыми if else заявления; вы могли бы, вероятно, использовать тернарный оператор, но код оказался бы довольно кратким и не столь ясным.

В любом случае. как я уже говорил выше, вы в первую очередь необходимо настроить цветовую гамму, которую я сделал с помощью

d3.scale.category10()

Затем нужно рассчитать уникальные категориальные переменные цвета шкалы домена, это может быть сделано для он Speciality переменная. d3.set может сделать это за вас, но сначала вам нужно получить массив из Speciality переменных.

var categoryArray = []; 

csv.forEach(function(d,i) { 
    categoryArray[i] = d.Specialty; 
}); 

colourDomain = d3.set(categoryArray) 
    .values(); 

Пропустите уникальный массив специальностей в цветовой гамме

colours.domain(colourDomain); 

Теперь все, что вам нужно сделать, это создать анонимную функцию, чтобы установить цвет для дорожек штрихов. Это довольно прямолинейно, и я признаю, что не изящество элегантно. Ваша link переменная станет:

var link = canvas.selectAll(".link") 
      .data(links) 
      .enter().append("path") 
      .attr("class", "link") 
      .attr("stroke", function(d,i) { 
       if (d.source.depth === 1) { 
        return colours(d.source.name); 
       } else if (d.source.depth === 2) { 
        return colours(d.source.parent.name); 
       } else if (d.source.depth === 3) { 
        return colours(d.source.Specialty); 
       } else { 
        return "white"; 
       } 
      }) 
      .attr("d", diagonal); 

Не забудьте удалить атрибут обводки для класса ссылок из файла CSS либо.

О, это не даст вам уникальный цвет для каждой категории; он повторяет 10 цветов в шкале. Это может быть нормально для вашего приложения, в противном случае настройка цветовой шкалы, чтобы дать вам уникальные значения, легко сделать в d3.