The d3.js widget displays cycles with a flow across the top of the diagram. This can be seen clearly with the pure d3.js and HTML rendering in src/test.html.

However, the same data rendered in a Sisense context shows some odd clipping.

To filter on filter on source and target in the Sisense sankey widget, we need to be able to click on the svg path element.

This Stackoverflow question addresses attaching a click event to a path. It amounts to making sure the DOM element is findable (in this case, using a unique CSS ID).

This code:

  var link = allgraphics.append("g").attr("id", "link-container")
      .selectAll(".link")
      .data(energy.links)
    .enter().append("path")
      .attr("class", function(d) { return (d.causesCycle ? "cycleLink" : "link") })
      .attr("d", path)
      .sort(function(a, b) { return b.dy - a.dy; });

makes clear that the nodes have CSS class of link or cycleLink when they connect two nodes, so this code:

  var click_path = function(d) {
    if (d3.event.defaultPrevented) return; // click suppressed
    console.log("clicked " + d.name + "!");
  };

  d3.selectAll(".link") .on("click", click_path);
  d3.selectAll(".cycleLink").on("click", click_path);

will make them clickable. Then the paths need to store the identifiers of the nodes they attach so that the Sisense widget code can attach a click event that retrieves the target and source for filtering.