使用 CircosJS 如何 link 布局的 div

Question

我是 d3js 的新手，我正在尝试使用这个模块：https://github.com/nicgirault/circosJS

我对卡住的东西做了一个 plunker：https://plnkr.co/edit/8Sn0quYr5teCv239W9k6?p=preview

我怎么能 link 个月呢？

这是我的 JS 代码：

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

Answer 1

Link 一定是这样的：

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
      }
    }
  ];

笨蛋：https://plnkr.co/edit/lwY1kpYoxPMtYzaohckq?p=preview

使用 CircosJS 如何 link 布局的 div

Using CircosJS how to link layout's divs

angularjs

d3.js

circos