0

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
    },
haz
  • 740
  • 1
  • 11
  • 20
  • Link isn’t working for me. – Rens Tillmann Aug 15 '19 at 07:37
  • I am not sure but I think this is what you are looking for: https://philogb.github.io/jit/static/v20/Docs/files/Options/Options-Edge-js.html#Options.Edge unless they meant something else with `Edge`. You also have the option to create your very own line type it appears: https://philogb.github.io/jit/static/v20/Docs/files/Visualizations/Sunburst-js.html#Sunburst.Plot.EdgeTypes – Rens Tillmann Aug 15 '19 at 07:55
  • Thanks Rens but the Edges option relates to lines connecting nodes - not the border around the node – haz Aug 15 '19 at 08:44
  • 1
    Ok, in that case I couldn't really find anything other settings to modify. I think you'd have to dig into the source code to find out, or ask on github. GL :) – Rens Tillmann Aug 15 '19 at 14:50

1 Answers1

0

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?

haz
  • 740
  • 1
  • 11
  • 20