angularjsd3.jscircos

Using CircosJS how to link layout's divs


I'm kind of new to d3js and I'm trying to use this one module : https://github.com/nicgirault/circosJS

I've made a plunker on what I'm stuck : https://plnkr.co/edit/8Sn0quYr5teCv239W9k6?p=preview

How can I link months between them ?

Here's is my JS code :

var myCircos = new Circos({
    container: '#chart',
    width: 900,
    height: 900,
  });

var configuration = {
    innerRadius: 250,
    outerRadius: 300,
    cornerRadius: 10,
    gap: 0.04, // in radian
    labels: {
      display: true,
      position: 'center',
      size: '14px',
      color: '#000000',
      radialOffset: 20,
    },
    ticks: {
      display: false
    },
    clickCallback: null
  };

 var data = [
    { len: 31, color: "#8dd3c7", label: "January", id: "january" },
    { len: 28, color: "#ffffb3", label: "February", id: "february" },
    { len: 31, color: "#bebada", label: "March", id: "march" },
    { len: 30, color: "#fb8072", label: "April", id: "april" },
    { len: 31, color: "#80b1d3", label: "May", id: "may" },
    { len: 30, color: "#fdb462", label: "June", id: "june" },
    { len: 31, color: "#b3de69", label: "July", id: "july" },
    { len: 31, color: "#fccde5", label: "August", id: "august" },
    { len: 30, color: "#d9d9d9", label: "September", id: "september" },
    { len: 31, color: "#bc80bd", label: "October", id: "october" },
    { len: 30, color: "#ccebc5", label: "November", id: "november" },
    { len: 31, color: "#ffed6f", label: "December", id: "december" }
  ];

  var dataLink = [
    // sourceId, sourceStart, sourceEnd, targetId, targetStart, targetEnd
    ['january', 1, 12, 'april', 18, 20],
    ['february', 20, 28, 'december', 1, 13],
  ];

 myCircos
    .layout(data, configuration)
    .chords("LinkById",dataLink, configuration);

  myCircos
    .render();

Solution

  • Link must be like that :

    var dataLink = [{
          source: {
            id: 'january',
            start: 1,
            end: 12
          },
          target: {
            id: 'april',
            start: 18,
            end: 20
          }
        },
        {
          source: {
            id: 'february',
            start: 20,
            end: 28
          },
          target: {
            id: 'december',
            start: 1,
            end: 13
          }
        }
      ];
    

    Plunker: https://plnkr.co/edit/lwY1kpYoxPMtYzaohckq?p=preview