D3 依赖轮未正确渲染答案

【问题标题】：D3 Dependency Wheel not rendering properlyD3 依赖轮未正确渲染
【发布时间】：2015-04-10 18:26:26
【问题描述】：

我正在尝试为我的包构建一个像 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)"

有人可以帮我吗？

【问题讨论】：

标签： javascript d3.js dependencies

【解决方案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;
        });
    }
}

这是一个有效的 plunk：http://plnkr.co/edit/FeGSNFx5xd4MRKg1qG6U?p=preview

【讨论】：

谢谢亨利。想问是否有一种方法可以在悬停时将依赖项和依赖项显示为工具提示？