CODEWITHSUNDEEP
javascriptsvgd3.jssunburst-diagram
NiceUX
NiceUX

Reputation: 57

D3 Sunburst Breadcrumb on Y Axis

I'm new to D3 and am trying to modify Kerryrodden's sequences sunburst with displaying the breadcrumb on the Y (vertical) axis.

Here is an example of what I'm going for: enter image description here

Here is a fiddle for where I'm at: http://jsfiddle.net/niceux/tth0goc7/

Basically, i've tried finding where the svg group is being appended, and swapping the x axis code with the y axis code on line 199 of the fiddle code:

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

Upvotes: 2

Views: 2258

Answers (1)

Henry S
Henry S

Reputation: 3112

Here's a fiddle with the basics to get you started: http://jsfiddle.net/henbox/8m2gn7vw/2/

I made a few changes. Firstly, this was the code section determining how each breadcrumb polygon was positioned:

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

Switching the translate to position breadcrumb nodes vertically was a case of fixing the x-axis at 0 and calculating the y-axis position instead, as well as switching the breadcrumb polygon width (b.w) for the height (b.h) like this:

return "translate(0, " + i * (b.h + b.s) + ")";

Next I needed to modify the <div id="sequence"></div> html element to fit the new shape of the breadcrumb trail. It was easiest to remove the sequence div all together and create a new div with id=leftsidebar based on the existing <div id="sidebar"> element used on the right side for the legend. I modified the CSS to give size and position for the new div.

Finally I moved the percentageString into the correct position, below the last breadcrumb node. For this I made a switch to x and y attributes from:

d3.select("#trail").select("#endlabel")
    .attr("x", (nodeArray.length + 0.5) * (b.w + b.s))
    .attr("y", b.h / 2)

to

d3.select("#trail").select("#endlabel")
    .attr("x", b.w / 2)
    .attr("y", (nodeArray.length + 0.5) * (b.h + b.s))

For further improvements, you'd probably want to re-shape the breadcrumb polygons (they point right at the moment which looks odd

Upvotes: 4

Related Questions