使用 CircosJS 如何链接布局的 div

Question

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

我已经对我被困住的东西做了一个笨拙：https://plnkr.co/edit/8Sn0quYr5teCv239W9k6?p=preview

我怎样才能在它们之间链接月份？

这是我的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

链接必须是这样的：

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