CODEWITHSUNDEEP
javascriptinfovis
haz
haz

Reputation: 780

javascript infovis sunburst - how to space nodes

I'm using this sunburst visualisation

Sunburst example

and trying to find a way to increase the width (or border width) between the adjacent nodes (shown in the image below as the thin black line separating the nodes "Coordinates" from "Core"

enter image description here

The document on configuring the sunburst is here Sunburst docs but I can't see a way to access this property.

Here is an example of the node config:

       Node: {
      overridable: true,
      type: 'multipie',
      align: "center",
      angularWidth: 20,
      lineWidth: 20,
      autoWidth: false
    },

Upvotes: 0

Views: 33

Answers (1)

haz
haz

Reputation: 780

I had to access the jit.js library and under the sunburst 'multipie' config, ie:

'multipie': {
  'render': function(node, canvas) {
    var height = node.getData('height');
    var ldist = height? height : this.config.levelDistance;
    var span = node.getData('span') / 2, theta = node.pos.theta;
    var begin = theta - span, end = theta + span;
    var polarNode = node.pos.getp(true);
    var polar = new Polar(begin, polarNode.rho);
    var p1coord = polar.getc(true);
    polar.theta = end;
    var p2coord = polar.getc(true);
    polar.rho += ldist;
    var p3coord = polar.getc(true);
    polar.theta = begin;
    var p4coord = polar.getc(true);
    var ctx = canvas.getCtx();
    ctx.moveTo(0, 0);
    ctx.beginPath();
    ctx.arc(0, 0, polarNode.rho, begin, end, false);
    ctx.arc(0, 0, polarNode.rho + ldist, end, begin, true);
    ctx.moveTo(p1coord.x, p1coord.y);
    ctx.lineTo(p4coord.x, p4coord.y);
    ctx.moveTo(p2coord.x, p2coord.y);
    ctx.lineTo(p3coord.x, p3coord.y);
    ctx.fill();

I added the following:

ctx.strokeStyle = "rgba(247, 247, 247, 0.96)";
ctx.lineWidth   = 0.5;
ctx.save();
ctx.clip();
ctx.lineWidth *= 2;
ctx.fill();
ctx.stroke();
ctx.restore();

The width and color of the stroke is set by ctx.lineWidth and ctx.strokeStyle

Can someone suggest a way of doing this without accessing the library?

Upvotes: 0

Related Questions