D3 Dependency Wheel not rendering properly

Vaibhav Agarwal Published at Dev

Vaibhav Agarwal

I am trying to construct a dependency wheel like this http://www.redotheweb.com/DependencyWheel/ for my packages. I have written the following code. But, my wheel is not rendering properly.

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

What I am seeing?

enter image description here

Besides, I am getting following errors in my console:
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)"

Could somebody please help me out here?

Henry S

The problem is in the way you're creating the matrix array. You put the 1's in the right places, but matrix needs to be a square matrix (docs here) so the rest of the values should be 0's. Your matrix looks like this:

enter image description here

As a fix, I've created a 0-filled matrix_row, the length of packageNames, which can be added as you loop through each 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;
        });
    }
}

Here's a working plunk: http://plnkr.co/edit/FeGSNFx5xd4MRKg1qG6U?p=preview

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-02-18

Comments

0 comments

From Dev

Related Related

Article

D3 Dependency Wheel not rendering properly

D3 Dependency Wheel not rendering properly

d3 image in circle not rendering properly

Colour not rendering properly Pie Chart d3

d3 Wheel of Fortune

d3 Wheel of Fortune

Rendering GeoJson file in D3 v4 is not scaling properly

d3JS Chart Not Rendering Properly

d3JS Chart Not Rendering Properly

Pelican on S3: theme not rendering properly

Bootstrap 3 navbar not rendering properly in Microsoft Edge

D3: Detect mouse wheel event through overlaid SVG

d3 axis rendering outside the SVG

D3 topology rendering issue in Chrome

D3 layout tree is not rendering

TopoJSON rendering issues using D3

D3 Line with JSON Data, Not Rendering

Dots of Scatterplot in d3 are not rendering

how to inject d3 dependency?

d3 Links Not Properly Hiding

ejs template not rendering properly

Nested Layout not rendering properly

Image not rendering properly

Markdown in Meteor not rendering properly

canvasJS chart not rendering properly

Javafx image not rendering properly

SVG not rendering properly in Firefox

JavaFx not rendering properly

Nested JLayeredPane not rendering properly

Properly rendering stored HTML

Bundled scripts not rendering properly