Link (diagonal)? about d3-shape HOT 15 CLOSED

I'm not understanding this exchange very well between you guys.

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

New???

Sorry to disturb!

from d3-shape.

The simplest option here is to have two variants of a link shape: one with vertical tangents and one with horizontal tangents:

function linkHorizontal(d) {
  return "M" + d.source.x + "," + d.source.y
      + "C" + d.source.x +  "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
      + " " + d.target.x + "," + d.target.y;
}

function linkVertical(d) {
  return "M" + d.source.x + "," + d.source.y
      + "C" + (d.source.x + d.target.x) / 2 + "," + d.source.y
      + " " + (d.source.x + d.target.x) / 2 + "," + d.target.y
      + " " + d.target.x + "," + d.target.y;
}

Then, in conjunction with d3/d3-hierarchy#63, it becomes much easier to change the orientation of a hierarchical layout and its links without the complexity of diagonal.projection from 3.x.

There’s a related question whether we want the midpoint of the link to be configurable: should it be specified as a parameter t in [0, 1], or as a fixed offset from the source or target? Of course, it’s probably sufficient to just keep it simple and not configurable. But if we want to be forwards-compatible then linkVertical should return a link generator function (like d3.line) rather than being a static, non-configurable shape generator.

from d3-shape.

I dunno… Seems pretty generic and this seems like a reasonable place for it.

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;

Horizontal:

function link(d) {
    return `M${d.source.y},${d.source.x}C${(d.source.y + d.target.y) / 2},${d.source.x} ${(d.source.y + d.target.y) / 2},${d.target.x} ${d.target.y},${d.target.x}`;
  }

Vertical:

function link(d) {
    return `M${d.source.x},${d.source.y}C${(d.source.x + d.target.x) / 2},${d.target.y} ${(d.source.x + d.target.x) / 2},${d.source.y} ${d.target.x},${d.target.y}`;
  }

from d3-shape.

Here are some examples…

• Dendrogram
• Radial Dendrogram
• Tidy Tree
• Radial Tidy Tree
• Tidy Tree vs. Dendrogram

from d3-shape.

I dunno… Seems pretty generic and this seems like a reasonable place for it.

function link(d) {
  return "M" + d.source.y + "," + d.source.x
      + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
      + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
      + " " + d.target.y + "," + d.target.x;
}

from d3-shape.

Also if you want it to render to both Canvas and SVG, then it becomes even more tedious to not have this available in d3-shape.

from d3-shape.

Hi there Mike. I use the svg.diagonal to associate arbitrary shapes (i.e. not necessarily links in a formal hierarchy) like this:
var diagonal = d3.svg.diagonal().projection(function (d) { return [d.y, d.x]; });
I'm at a loss as to how I would implement this behavior in version 4. How would you suggest I go about this?
Thanks!

from d3-shape.

Sorry Mike, I was being a dork. Sorted with your simple link(d) function, which I initially ignored. Apologies

from d3-shape.

Perfect, thanks!

from d3-shape.

Thanks you Mike. Appreciate your time.

from d3-shape.

It’s trivial to adjust that line function definition for V4:

var line = d3.line()
    .x(function(d) { return d.x; })
    .y(function(d) { return d.y; })
    .curve(d3.curveLinear);

The rest of what you described is unchanged.

from d3-shape.

We will also need a radial link.

from d3-shape.

Hi @mbostock,

In my code written by someone else earlier for rendering d3-sankey with d3 v3 js by using diagonal is given below.

var path = d3.svg.diagonal()
.source(function(d) {
return {"x":d.source.y + d.source.dy / 2,
"y":d.source.x + sankey.nodeWidth()/2};
})
.target(function(d) {
return {"x":d.target.y + d.target.dy / 2,
"y":d.target.x + sankey.nodeWidth()/2};
})
.projection(function(d) { return [d.y, d.x]; });

Can you help me how should I replace my calculation with your.

from d3-shape.

Would it be possible to expose a generic link generator function that could be supplied with custom directions for creating the link? Use case is generating more complex L-shaped and dogleg links, both with straight lines and with arcs. I have some old d3 v3-compatible code that currently generates the links using string concatenation, but it would be really nice to use pathTo, arcTo, and so on instead, without having to compile my own custom module that copies most of the contents of link().

from d3-shape.

I read all the exchange, and while I am an happy user of linkVertical/Horizontal and such, I'm having trouble implementing a different kinda of connection, as per example http://bl.ocks.org/jdarling/2503502
Is there an API I'm missing to get something similar?

from d3-shape.