const colorScale = d3.scale.category20(); const numberFormat = d3.format(".3s"); const DetailsChordsPanel = React.createClass({ mixins: [ContentLoaderMixin, ChartMixin], componentDidMount() { ChordsDiagramStore.addChangeDataListener(this._onChange); }, componentWillUnmount() { ChordsDiagramStore.removeChangeDataListener(this._onChange); }, buildChart() { // generate chord layout this.chord = d3.layout.chord() .padding(.05) .sortSubgroups(d3.descending) .matrix(this.state.data.matrix); // Main SVG this.svgSel = d3.select(this.svg) .attr('width', '100%') .attr('height', '100%'); this.zoom = d3.behavior.zoom().on('zoom', this.onZoom); this.svgSel.call(this.zoom); this.canvas = this.svgSel.append('g'); const dragB = d3.behavior.drag().on('drag', this.drag).on('dragstart', this.dragStart);
ChordChart.prototype.addChordGraph = function (svg, div, data, names, width, height) { var self = this; var scale; var parsedData = self.parseData(data); var labels = parsedData[0]; var matrix = parsedData[1]; var color; var tooltip; var fill = d3.scale.category10(); var container = svg.append('g'); var r1; var innerRadius; //variable which holds boolean value to determinte whether show or not to show legend var isChecked = $('#legendCheckbox').is(':checked'); //setting size of diagram due to legend if (isChecked) { r1 = Math.min(width - 160, height - 160) / 2; innerRadius = Math.min(width - 160, height - 160) * .41; } else { r1 = height / 2; innerRadius = Math.min(width, height) * .41; } var outerRadius = innerRadius * 1.1; //setting chord layout var chord = d3.layout.chord() .padding(.05) .sortSubgroups(d3.descending) .matrix(matrix); //setting tooltip properties var tooltip = div.append('div') .attr('class', 'tooltip-relation') .style('opacity', 0); container.attr('transform', 'translate(' + (width) / 2 + ',' + (height) / 2 + ')'); //drawring outer parts of diagram container.append('g').selectAll('path') .data(chord.groups) .enter().append('path') .attr('class', 'arc') .style('fill', function (d) { return labels[d.index].includes('destination') ? '#444444' : fill(d.index); }) .attr('d', d3.svg.arc().innerRadius(innerRadius).outerRadius(outerRadius)) .on('mouseover', self.fade(.05, true, svg, labels, tooltip, names, 'arc')) .on('mouseout', self.fade(.8, false, svg, labels, tooltip, names, 'arc')); container.append('g') .attr('class', 'chord') .selectAll('path') .data(chord.chords) .enter().append('path') .attr('d', d3.svg.chord().radius(innerRadius)) .style('fill', function (d) { return fill(d.source.index); }) .style('opacity',0.8) .on('mouseover', self.fade(.05, true, svg, labels, tooltip, names, 'chord')) .on('mouseout', self.fade(.08, false, svg, labels, tooltip, names, 'chord')); if (isChecked) { container.append('g') .attr('class','chord-text') .selectAll('.arc') .data(chord.groups) .enter().append('svg:text') .attr('dy', '.35em') .attr('text-anchor', function (d) { return ((d.startAngle + d.endAngle) / 2) > Math.PI ? 'end' : null; }) .attr('transform', function (d) { return 'rotate(' + (((d.startAngle + d.endAngle) / 2) * 180 / Math.PI - 90) + ')' + 'translate(' + (r1 - 15) + ')' + (((d.startAngle + d.endAngle) / 2) > Math.PI ? 'rotate(180)' : ''); }) .text(function (d) { if (labels[d.index].includes('source')) { return labels[d.index].replace('source',''); } else { return labels[d.index].replace('destination',''); }} ); }; };