javascript infovis sunburst -如何设置节点间距

Question

我用的是阳光下的可视化

Sunburst example

并试图找到一种方法来增加相邻节点之间的宽度(或边框宽度)(在下图中显示为分隔节点“坐标”和“核心”的细小黑线

​

​

关于配置sunburst的文档在这里是Sunburst docs，但我看不到访问此属性的方法。

以下是节点配置的示例：

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

Answer 1

我必须访问jit.js库，并且在sunburst 'multipie‘配置下，即：

'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();

我添加了以下内容：

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();

笔划的宽度和颜色由ctx.lineWidth和ctx.strokeStyle设置

有人能建议一种不用访问库就能做到这一点的方法吗？