CODEWITHSUNDEEP
svgd3.jsphylogeny
El Dude
El Dude

Reputation: 5618

D3 - Tree of life plot not showing data

I am trying to add this phylogenetic tree view https://observablehq.com/@d3/tree-of-life into a dashboard. The full code is available there and linked on the page for download.

I can get my own data in and parsed. However, I can not get the tree to show. Most specifically I do not understand where the x and y coordinates of the data points are set. It must be some implicit process?

function linkExtensionConstant(d) {
  return linkStep(d.target.x, d.target.y, d.target.x, innerRadius);
}

function _linkStep(){return(
function linkStep(startAngle, startRadius, endAngle, endRadius) {
  const c0 = Math.cos(startAngle = (startAngle - 90) / 180 * Math.PI);
  const s0 = Math.sin(startAngle);
  const c1 = Math.cos(endAngle = (endAngle - 90) / 180 * Math.PI);
  const s1 = Math.sin(endAngle);
  return "M" + startRadius * c0 + "," + startRadius * s0
      + (endAngle === startAngle ? "" : "A" + startRadius + "," + startRadius + " 0 0 " + (endAngle > startAngle ? 1 : 0) + " " + startRadius * c1 + "," + startRadius * s1)
      + "L" + endRadius * c1 + "," + endRadius * s1;
}
)}

Like above, the d.target.x is supposed to be set. However, when I run this d.target.x (and y) is undefined. I do not understand where in the code these attributes are attached to the items. All that is set are radius, length, depth by the parsing function and later.

From my current understanding the code 'should' not work because the geometric transformation in linkStep that take in these parameters return NaN and hence the turtle path it creates is broken. Or the downloadable code might not be working? But unlikely and I guess its me...

Can anyone please have a look at try help me understand this lib?

Upvotes: 0

Views: 41

Answers (1)

El Dude
El Dude

Reputation: 5618

I think I figured it out. It is the d3.cluster function that assigns the coordinates. Still messing with it, but a step further now.

Upvotes: 0

Related Questions