draw() { var cluster = d3.layout.cluster() .size([360, this.opts.radius]) .sort(null) .value(function (d) { return d.size; }); var bundle = d3.layout.bundle(); var line = d3.svg.line.radial() .interpolate('bundle') .tension(this.opts.tension) .radius(function (d) { return d.y; }) .angle(function (d) { return d.x / 180 * Math.PI; }); var svg = this.svg = this.$el.append('svg') .attr('width', this.opts.width) .attr('height', this.opts.height) .attr('class', 'c3-heb-wrapper') .append('g') .attr('transform', 'translate(' + this.opts.width / 2 + ',' + this.opts.height / 2 + ')'); var nodes = cluster.nodes(this.packageHierarchy(this.opts.data)), links = this.packageImports(nodes), splines = bundle(links); var path = svg.selectAll('path.link') .data(links) .enter().append('path') .attr('class', function (d) { return 'link source-' + d.source.key + ' target-' + d.target.key; }) .attr('d', function (d, i) { return line(splines[i]); }); svg.selectAll('g.node') .data(nodes.filter(function (n) { return !n.children; })) .enter().append('g') .attr('class', 'node') .attr('id', function (d) { return 'node-' + d.key; }) .attr('transform', function (d) { return 'rotate(' + (d.x - 90) + ')translate(' + d.y + ')'; }) .append('text') .attr('dx', function (d) { return d.x < 180 ? 8 : -8; }) .attr('dy', '.31em') .attr('text-anchor', function (d) { return d.x < 180 ? 'start' : 'end'; }) .attr('transform', function (d) { return d.x < 180 ? null : 'rotate(180)'; }) .text(function (d) { return d.name; }) .on('mouseover', this.nodeMouseover.bind(this)) .on('mouseout', this.nodeMouseout.bind(this)); }
var d3 = require('d3'); var diameter = 1000, radius = diameter / 2, innerRadius = radius - 180; var svg = d3.select('#classwheel').append('g') .attr("transform", "translate(" + radius + "," + radius + ")"); var bundle = d3.layout.bundle(), link = svg.append('g').selectAll('.link'), node = svg.append('g').selectAll('.node'); var cluster = d3.layout.cluster() .size([360, innerRadius]); var line = d3.svg.line.radial() .interpolate("bundle") .tension(.15) .radius(function(d) { return d.y; }) .angle(function(d) { return d.x / 180 * Math.PI; }); var active_career = undefined; var careers = {} function IDOrName(id){ if(careers[id]){ return careers[id].name; } return id; }