D3 Зависимость Колесо не обрабатывается должным образом

Я пытаюсь построить колесико зависимостей как это http://www.redotheweb.com/DependencyWheel/ для моих пакетов. Я написал следующий код. Но мое колесо не отображается должным образом.D3 Зависимость Колесо не обрабатывается должным образом

<!DOCTYPE html> 
<meta charset="utf-8"> 

<body> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://www.redotheweb.com/DependencyWheel/js/d3.dependencyWheel.js"></script> 
<script> 
    <!-- My JSON is in following style --> 
    json = JSON.parse('{"A":["B","C","D","E"],"B":["F"]} 

    var packageNames = []; 
    var obj = {} 
    var matrix = []; 
    for (var key in json) { 
     if (json.hasOwnProperty(key) && !(key in obj)) { 
      packageNames.push(key); 
      obj[key] = true; 
     } 
     json[key].forEach(function (neighbor) { 
      if (!(neighbor in obj)) { 
       packageNames.push(neighbor); 
       obj[neighbor] = true; 
      } 
     }); 
    } 
    for (var package of packageNames) { 
     matrix[packageNames.indexOf(package)] = []; 
     if (json[package] != null) { 
      json[package].forEach(function (neighbor) { 
       matrix[packageNames.indexOf(package)][packageNames.indexOf(neighbor)] = 1; 
      }); 
     } 
    } 

    console.log(matrix); 
    console.log(packageNames); 

    jQuery(function() { 
     var chart = d3.chart.dependencyWheel(); 
     d3.select('#chart_placeholder') 
      .datum({ 
       packageNames: packageNames, 
       matrix: matrix 
      }) 
      .call(chart); 
    }); 
</script> 
<div id="chart_placeholder"></div>

Что я вижу?

enter image description here

Кроме того, я получаю следующие ошибки в моей консоли:
Error: Invalid value for <path> attribute d="MNaN,NaNA200,200 0 0,1 NaN,NaNQ 0,0 NaN,NaNA200,200 0 0,1 NaN,NaNQ 0,0 NaN,NaNZ"
Error: Invalid value for <path> attribute transform="rotate(NaN)"

Может кто-то пожалуйста, помогите мне здесь?

источник

2015-04-10 Vaibhav Agarwal

Проблема в том, как вы создаете массив matrix. Вы помещаете 1 в нужные места, но matrix должна быть квадратной матрицей (docs here), поэтому остальные значения должны быть 0. Ваш matrix выглядит следующим образом:

enter image description here

Как исправить, я создал 0 заполненные matrix_row, длина packageNames, которые могут быть добавлены как вы петлю через каждый package:

// Define a new array, padded with zeros 
var matrix_row = Array.apply(null, new Array(packageNames.length)).map(Number.prototype.valueOf,0); 

for (var package of packageNames) { 
    // Then add this 0-filled row for each package to create a square matrix 
    matrix[packageNames.indexOf(package)] = matrix_row; 
    if (json[package] != null) { 
     // And now replace some of those 0s with 1s 
     json[package].forEach(function (neighbor) { 
      matrix[packageNames.indexOf(package)][packageNames.indexOf(neighbor)] = 1; 
     }); 
    } 
}

Вот рабочий стол: http://plnkr.co/edit/FeGSNFx5xd4MRKg1qG6U?p=preview

источник

2015-04-10 10:07:33

Спасибо, Генри. Хотел спросить, есть ли способ показать иждивенцев и зависимостей в качестве подсказки при наведении курсора? –

D3 Зависимость Колесо не обрабатывается должным образом

ответ

Смежные вопросы