src/main/shadow/cljs/ui/bundle_renderer.js
function updateBreadcrumbs(nodeArray, percentageString) {

  // Data join; key function combines name and depth (= position in sequence).
  var g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.name + d.depth; });

  // Add breadcrumb and label for entering nodes.
  var entering = g.enter().append("svg:g");

  entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d) { return colors[d.name]; });

  entering.append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });

  // Set position for entering and updating nodes.
  g.attr("transform", function(d, i) {
    return "translate(" + i * (b.w + b.s) + ", 0)";
  });

  // Remove exiting nodes.
  g.exit().remove();

  // Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");

}
function updateBreadcrumbs(nodeArray, percentageString) {

  // Data join; key function combines name and depth (= position in sequence).
  var g = d3.select("#trail")
      .selectAll("g")
      .data(nodeArray, function(d) { return d.name + d.depth; });

  // Add breadcrumb and label for entering nodes.
  var entering = g.enter().append("svg:g");

  entering.append("svg:polygon")
      .attr("points", breadcrumbPoints)
      .style("fill", function(d) { return colors[d.name]; });

  entering.append("svg:text")
      .attr("x", (b.w + b.t) / 2)
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(function(d) { return d.name; });

  // Set position for entering and updating nodes.
  g.attr("transform", function(d, i) {
    return "translate(" + i * (b.w + b.s) + ", 0)";
  });

  // Remove exiting nodes.
  g.exit().remove();

  // Now move and update the percentage at the end.
  d3.select("#trail").select("#endlabel")
      .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
      .attr("y", b.h / 2)
      .attr("dy", "0.35em")
      .attr("text-anchor", "middle")
      .text(percentageString);

  // Make the breadcrumb trail visible, if it's hidden.
  d3.select("#trail")
      .style("visibility", "");

}
function updateBreadcrumbs ( nodeArray , percentageString ) { // Data join; key function combines name and depth (= position in sequence). var g = d3 . select ( "#trail" ) . selectAll ( "g" ) . data ( nodeArray , function ( d ) { return d . name + d . depth ; } ) ; // Add breadcrumb and label for entering nodes. var entering = g . enter ( ) . append ( "svg:g" ) ; entering . append ( "svg:polygon" ) . attr ( "points" , breadcrumbPoints ) . style ( "fill" , function ( d ) { return colors [ d . name ] ; } ) ; entering . append ( "svg:text" ) . attr ( "x" , ( b . w + b . t ) / 2 ) . attr ( "y" , b . h / 2 ) . attr ( "dy" , "0.35em" ) . attr ( "text-anchor" , "middle" ) . text ( function ( d ) { return d . name ; } ) ; // Set position for entering and updating nodes. g . attr ( "transform" , function ( d , i ) { return "translate(" + i * ( b . w + b . s ) + ", 0)" ; } ) ; // Remove exiting nodes. g . exit ( ) . remove ( ) ; // Now move and update the percentage at the end. d3 . select ( "#trail" ) . select ( "#endlabel" ) . attr ( "x" , ( nodeArray . length + 0.5 ) * ( b . w + b . s ) ) . attr ( "y" , b . h / 2 ) . attr ( "dy" , "0.35em" ) . attr ( "text-anchor" , "middle" ) . text ( percentageString ) ; // Make the breadcrumb trail visible, if it's hidden. d3 . select ( "#trail" ) . style ( "visibility" , "" ) ; }
Update the breadcrumb trail to show the current sequence and percentage.
Update the breadcrumb trail to show the current sequence and percentage .