CODEWITHSUNDEEP
d3.js
d3noob
d3noob

Reputation: 2151

Direction of link orientation in tree diagram incorrect

Starting from the tree diagram example here I want to change the links so that the source and target locations of each can be altered relative to their common meeting point. My current progress point is here (these examples are contrived to demonstrate the problem, but I believe it does so adequately).

This appears to be possible using the source and target assessor functions. I have therefore edited the original code for the diagonal variable from;

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

to;

var diagonal = d3.svg.diagonal()
    .source(function(d) { return {x: d.source.y , y: d.source.x}; })
    .target(function(d) { return {x: d.target.y , y: d.target.x}; });

Which has worked fine for the locations, but the links think that they are still vertical and as a result look like this;

enter image description here

rather than this;

enter image description here

I have tried altering the orientations of the x / y values in the diagonal variable declaration which only succeeds in orientating the tree links vertically.

I have also tried doing the same in a slightly more complex piece of code when entering the links, with the links appearing with the incorrect orientation again.

I can't help but think that I need to be including an additional assessor to account for the direction of the curve, but I'm darned if I can see it.

Starting code here.

Adapted code here.

Many thanks for you attention.

Upvotes: 1

Views: 259

Answers (1)

Andrew Reid
Andrew Reid

Reputation: 38151

I may be completely missing something here. But but replacing:

.projection(function(d) { return [d.y, d.x]; });

with:

.source(function(d) { return {x: d.source.y , y: d.source.x}; })
.target(function(d) { return {x: d.target.y , y: d.target.x}; });

almost replicates the functionality of .projection, except for how the lines are interpolated. Instead, if you set the projection as it was originally and define the the x and y coordinates for source and target normally, the entire diagram is flipped from vertical alignment to horizontal:

var diagonal = d3.svg.diagonal()
  .projection(function(d) { return [d.y, d.x]; })
  .source(function(d) { return {x: d.source.x , y: d.source.y}; })
  .target(function(d) { return {x: d.target.x , y: d.target.y}; })

Giving:

enter image description here

Which still gives you access to the source and target assessors while maintaining a correct alignment, which I take as the goal.

Love your D3 site by the way, it's a great resource.

Upvotes: 2

Related Questions