D3 Dependency Wheel 无法正确呈现

Question

我正在尝试为我的包构建一个像这样的依赖轮 http://www.redotheweb.com/DependencyWheel/。我写了下面的代码。但是，我的轮子没有正确渲染。

<!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>

我看到了什么？

此外，我的控制台出现以下错误：
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)"

有人可以帮我解决这个问题吗？

Answer 1

问题在于您创建 matrix 数组的方式。您将 1 放在正确的位置，但 matrix 需要是一个方阵 (docs here)，因此其余值应该是 0。您的 matrix 看起来像这样：

作为修复，我创建了一个 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

D3 Dependency Wheel 无法正确呈现

D3 Dependency Wheel not rendering properly

javascript

dependencies

d3.js