ChrisJ ChrisJ - 3 months ago 24x
Javascript Question

D3 -- Arcs for chord diagram not being displayed

I trying to understand how the D3 chord diagram works. My first step is to display the arcs for the diagram with following script. But for some reason, the arcs are not showing up.

See web page HERE

Can some one tell me what I am missing?

// Chart dimensions.
var width = 960,
height = 750,
innerRadius = Math.min(width, height) * .41,
outerRadius = innerRadius * 1.1;

//Create SVG element with chart dementions
var svg = d3. select("body")
.attr("width", width)
.attr("height", height)
.append ("g")
.attr("transform", "translate (" + width / 2 + "," + height / 2 + ")");

//------------Reformat Data ------------------------------------------

var matrix = []; // <- here is the data
d3.tsv('picData.tsv', function(err, data)
pictures = d3.keys(data[0]).slice(1);

var mrow = [];
//console.log('1st row: ' + matrix[0]);

//---------------- Define diagram layout ----------------------------

var chord = d3.layout.chord() //<-- produce a chord diagram from a matrix of input data
.matrix(matrix) //<-- data in matrix form

var fill = d3.scale.category20(); //<--

var g = svg.selectAll("")
.attr("class", "group");


// create arcs
var arc = d3.svg.arc()


.attr("d", arc)
.style("fill", function(d) { console.log(d.index); return fill(d.index);})
.style("stroke", function(d) { return fill(d.index); })
.attr("id", function(d, i) { return"group-" + d.index });;

.attr("x", 6)
.attr("class", "picture")
.attr("dy", 15)
.attr("xlink:href", function(d) { return "#group-" + d.index; })
.text(function(d) { return pictures[d.index]; });



Your problem stems from the fact that d3.tsv is asynchronous:

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url... The request is processed asynchronously.

As a result, all of your code under "Define diagram layout" is being executed before any data is loaded. Otherwise, your code works fine (See image below). So just move all your code into your d3.tsv(...) call and you'll be all set.

enter image description here