stefaneidelloth/javafx-d3

Problem setting the .attr("d",...) for a transition

xwavex opened this issue · 1 comments

TL;DR
It seems like I cannot update the diagonal inside a transition:

Transition linkUpdate = link.transition()
    .duration(duration)
    .attr("d", diagonal2);

As far as I can see, the "d"-attribute doesn't get changed.

Long Version
I am trying to mimic the following behavior:

// Enter any new links at the parent's previous position.
link.enter().insert("path", "g")
    .attr("class", "link")
    .attr("d", function(d) {
        var o = {x: source.x0, y: source.y0};
            return diagonal({source: o, target: o});
        });

// Transition links to their new position.
link.transition()
    .duration(duration)
    .attr("d", diagonal);

For this I define two different Diagonal-Objects and use the first one when I insert new path elements. The second one is used when I define the transition:

// First Diagonal
DataFunction<Double[]> coordsFunction = new DataFunctionWrapper<>(org.treez.javafxd3.d3.coords.Coords.class, engine, (coords) -> {
    return new Double[] { 0.0, 0.0 };
});
Diagonal diagonal = d3.svg() //
    .diagonal() //
    .projection(coordsFunction);

// Second Diagonal
DataFunction<Double[]> coordsFunction2 = new DataFunctionWrapper<>(org.treez.javafxd3.d3.coords.Coords.class, engine, (coords) -> {
    double r = coords.y();
    double a = (coords.x() - 90) / 180 * Math.PI;
    return new Double[] { r * Math.cos(a), r * Math.sin(a) };
});
final Diagonal diagonal2 = d3.svg() //
    .diagonal() //
    .projection(coordsFunction2);

// Get all links from data
Selection link = svg.selectAll("." + "link").data(links);

// Insert path elements
link.enter() //
    .insert("path", "g") //
    .attr("class", "link")
    .attr("d", diagonal);

// Add transition to the group
Transition linkUpdate = link.transition()
    .duration(duration)
    .attr("style", "fill: #00BB00;")
    .attr("d", diagonal2);

The result is that the first diagonal gets executed, but the second one seems to just be ignore? However, the "style" part from the transition is applied properly.

Any suggestions, what I might be missing here?

I can't directly see an issue by inspecting the code. Did you try to set a break point inside coordsFunction2? How does your "links" data look like? Maybe you could provide a full example with some data so that I am able to run the code?