Losing Data Binding When Creating Path

Question

Total admission that I'm only a few weeks into D3, but I've sat here for a few hours now debugging to no avail.

Notice the two console.log(d) statements buried in the anonymous functions. The one on the 'dummy' attribute returns the value, the one in the d attribute does not.

What is different about those two?

var myEdges = [
    {
        in: "934e3e11-3f9b-11e9-b2b9-c54f58764873",
        out: "936807a1-3f9b-11e9-b2b9-c54f58764873"
    },
]

svg.selectAll('path:not([elementType=temp-path])').data(myEdges)
    .enter().append('path')
        .attr("fill", "none")
        .attr("stroke", "blue")
        .style("stroke-width", "2px")
        .attr('dummy', function(d) { console.log(d); return d;})
        .attr('d', d3.linkVertical()
                                .x(function(d) { console.log(d); return d.in; })
                                .y(function(d) { return d.out; }));

Gerardo Furtado · Accepted Answer · 2019-03-06T07:24:59.830

The problem is not that the datum (d) attribute isn't being passed: it is. The problem here is just the structure of the data that the link generator is expecting.

If you look at the API, you'll see that the link generator, by default, expects a data structure like this:

{
  source: foo,
  target: baz
}

By the way, you can change these properties by using link.source() and link.target().

So, if we change your data structure, the console will work:

var svg = d3.select("svg");

var myEdges = [{
  source: { in: "934e3e11-3f9b-11e9-b2b9-c54f58764873",
    out: "936807a1-3f9b-11e9-b2b9-c54f58764873"
  },
  target: { in: "934e3e11-3f9b-11e9-b2b9-c54f58764873",
    out: "936807a1-3f9b-11e9-b2b9-c54f58764873"
  }
}]

svg.selectAll('path:not([elementType=temp-path])').data(myEdges)
  .enter().append('path')
  .attr("fill", "none")
  .attr("stroke", "blue")
  .style("stroke-width", "2px")
  .attr('dummy', function(d) {
    console.log("dummy here: " + d);
    return d;
  })
  .attr('d', d3.linkVertical()
    .x(function(d) {
      console.log(d);
      return d.in;
    })
    .y(function(d) {
      return d.out;
    }));

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>

Finally, these other answers may help you to understand the data structure required by the link generator: https://stackoverflow.com/a/44760465/5768908 and https://stackoverflow.com/a/51424331/5768908

YES! Damn... that one got me. So, it's really saying `d.source` is what's undefined? Wish that was a bit clearer in the docs or error messaging. Thank you. — Scott, Mar 05 '19 at 23:35
@Scott Yes, you are right, the docs are a bit cryptic sometimes. — Gerardo Furtado, Mar 05 '19 at 23:39
So, I'd rather not change the structure of my data for other reasons, but is there a place I can transform the data as input to this attr? — Scott, Mar 05 '19 at 23:53
@Scott I'm not following your question above: to draw the path you need to have **two** object properties, one for the source and one for the target, and in each one you need to have two values, one for x and one for y (have a look at the other answers linked at the end of my answer to see how the data should be). I believe it's better if you post a **new** question, with the data structure you have and the visual outcome you're expecting. — Gerardo Furtado, Mar 06 '19 at 00:02

Losing Data Binding When Creating Path

1 Answers1