buildChart: function () {
this.state.root.fixed = true;
this.force = d3.layout.force()
.charge(d => (d.root?-15:-10)*this.sizeScale(d.size))
.on('tick', this.tick);
const svgSel = d3.select(this.svg);
const zoom = d3.behavior.zoom().on("zoom", this.onZoom);
svgSel.call(zoom);
this.canvas = svgSel.append('g');
this.tip = d3.tip().attr('class', 'd3-tip').html(d => {
var html;
html = '<span class="d3-tip-label"><strong>' + d.type + ':</strong> ' + d.name + '</span>';
if (d.tooltip) html = html + '<br /><br /><p class="d3-tip-message">' + d.tooltip + '</p>';
return html;
});
this.canvas.call(this.tip);
$(this.svg).width('100%').height('100%');
this.sizeScale = d3.scale.linear().domain([0, SpotConstants.MAX_SUSPICIOUS_ROWS]);
},
constructor(visConfig, axisConfigArgs) {
super();
this.visConfig = visConfig;
this.axisConfig = new AxisConfig(this.visConfig, axisConfigArgs);
if (this.axisConfig.get('type') === 'category') {
this.values = this.axisConfig.values;
this.ordered = this.axisConfig.ordered;
}
this.axisScale = new AxisScale(this.axisConfig, visConfig);
this.axisTitle = new AxisTitle(this.axisConfig);
this.axisLabels = new AxisLabels(this.axisConfig, this.axisScale);
this.stack = d3.layout.stack()
.x(d => {
return d.x;
})
.y(d => {
if (this.axisConfig.get('scale.offset') === 'expand') {
return Math.abs(d.y);
}
return d.y;
})
.offset(this.axisConfig.get('scale.offset', 'zero'));
const stackedMode = ['normal', 'grouped'].includes(this.axisConfig.get('scale.mode'));
if (stackedMode) {
const self = this;
this.stack = this._stackNegAndPosVals;
}
}
constructor($element) {
'ngInject';
const width = $element.parent().width();
const height = $element.parent().height();
const totalSize = (this.strokeWidth + this.marginBetweenCircles) * _.size(this.dataset);
const pie = d3.layout.pie().sort(null);
const arc = d3.svg.arc();
let currentElement = 0;
let radius = Math.min(width / 2 - totalSize, height / 2 - totalSize);
this._svg = d3.select($element[0]).append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`);
const pathGroups = this._svg.selectAll('g')
.data(this.dataset)
.enter()
.append('g')
.attr('class', (d) => `${COMPONENT_NAME}__${this.chartId}__${_.keys(d)[0]}`);
pathGroups.selectAll('path')
.data((d) => pie(getPercent(_.values(d))))
.enter().append('path')
.attr('class', (d, i) => `${COMPONENT_NAME}__${i === 1 ? 'rest' : 'current'}`)
.attr('d', (d, i, j) => {
if (j > 0 && currentElement !== j) {
radius += this.marginBetweenCircles + this.strokeWidth;
currentElement = j;
}
return arc.innerRadius(radius).outerRadius(radius + this.strokeWidth)(d);
});
}
AreaChart.prototype.generateChartData = function (originalData) {
var series = function (values, name) {
return {
name: name,
values: _.sortBy(values, _.result('campaign.start_date.getTime'))
}
}
var stack = d3.layout.stack()
.order('default')
.offset('zero')
.values(_.property('values'))
.x(_.property('campaign.start_date'))
.y(_.property('value'))
try {
var data = _(originalData)
.groupBy('indicator.short_name')
.map(series)
.thru(stack)
.value()
} catch (err) {
console.log(`Data error in ${originalData}`)
data = []
}
return data
}
render: function() {
this.$el.html(this.template({}));
var width = 300,
height = 300,
radius = Math.min(width, height) / 2,
valAttr = this.valAttribute;
this.legend = this.createLegend();
this.arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
this.pie = d3.layout.pie()
.sort(function(a,b) {
return b[valAttr] - a[valAttr]
})
.value(function(d) { return d[valAttr]; });
this.svg = d3.select(this.$('.pie-chart')[0]).append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
return this;
},
render:function() {
var props = this.props;
var pie = d3.layout
.pie()
.sort(null);
var arcData = pie(props.data);
var arcs = arcData.map(function(arc, i) {
return (
React.createElement(Arc, {
startAngle: arc.startAngle,
endAngle: arc.endAngle,
outerRadius: props.radius,
innerRadius: props.innerRadius,
labelTextFill: props.labelTextFill,
valueTextFill: props.valueTextFill,
fill: props.colors(i),
label: props.labels[i],
value: props.data[i],
key: i,
width: props.width}
)
);
});
return (
React.createElement("g", {className: "rd3-piechart-pie", transform: props.transform}, arcs)
);
}
d3.layout.treelist = function () {
var hierarchy = d3.layout.hierarchy().sort(null).value(null),
nodeHeight = 20,
childIndent = 20;
var treelist = function (d, i) {
var nodes = hierarchy.call(this, d, i),
root = nodes[0];
function visit(f, t, index, parent) {
if (t) {
f(t, index, parent);
}
var children = t.children;
if (children && children.length) {
children.forEach(function (child, ci) {
visit(f, child, ci, t);
});
}
}
/**
visit all nodes in the tree and set the x, y positions
*/
function layout(node) {
//all children of the same parent are rendered on the same x level
//y increases every time a child is added to the list
var x = 0, y = 0;
visit(function (n, index, parent) {
x = parent ? parent.x + childIndent : 0;
y = y + nodeHeight;
n.y = y;
n.x = x;
}, node);
}
layout(root);
return nodes;
};
treelist.nodeHeight = function (d) {
if (arguments.length) {
nodeHeight = d;
return treelist;
}
return nodeHeight;
};
treelist.childIndent = function (d) {
if (arguments.length) {
childIndent = d;
return treelist;
}
return childIndent;
};
treelist.nodes = treelist;
return treelist;
};
NBASummary.prototype._getLayout = function() {
var pie = d3.layout.pie().sort(null)
.value(function(d) {
return d.population;
});
return pie;
};
Graph = function(width, height, radius) {
this._nodes = [];
this._links = [];
this._radius = radius;
this._force = d3.layout.force()
.nodes(this._nodes)
.links(this._links)
.charge(-6000)
.linkDistance(150)
.size([width, height])
.on("tick", this._tick.bind(this));
this._svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
this._svg.append("marker")
.attr("id", "arrowhead")
.attr("refX", (this._radius/4) + 2)
.attr("refY", 2)
.attr("markerWidth", 6)
.attr("markerHeight", 10)
.attr("orient", "auto")
.append("path")
.attr("d", "M 0,0 V 4 L6,2 Z"); //this is actual shape for arrowhead
}
_createChartForce(nextProps = this.props){
let dom = ReactDOM.findDOMNode(this);
this.scales = createScales(nextProps);
const tick = (e) => {
let nodeGroup = svg.selectAll('g.node')
.on('mouseover', (dataObj) => { this.tooltip.style('visibility', 'visible'); this._positionTooltip(dataObj); })
.on('mousemove', this._positionTooltip.bind(this))
.on('mouseout', () => this.tooltip.style('visibility', 'hidden'));
updateNodes(nodeGroup, this.state.nodes, this.scales);
};
let svg = d3.select(dom).append('svg')
.attr({
width: this.props.size.width,
height: this.props.size.height
});
this.force = d3.layout.force()
.nodes(this.state.nodes)
.links([])
.size([this.props.size.width, this.props.size.height])
.charge((d) => {
return -1 ;
})
.gravity(0.1)
.on('tick', tick);
this._update(this.state.nodes);
}
function addViolin(svg, results, height, width, domain, imposeMax, violinColor) {
var data = d3.layout.histogram().bins(resolution).frequency(0)(results.results);
var y = d3.scale.linear().range([width / 2, 0]).domain([0, Math.max(imposeMax, d3.max(data, function (d) {
return d.y;
}))]);
var x = d3.scale.linear().range([height, 0]).domain(domain).nice();
var area = d3.svg.area().interpolate(interpolation).x(function (d) {
if (interpolation == "step-before") return x(d.x + d.dx / 2);
return x(d.x);
}).y0(width / 2).y1(function (d) {
return y(d.y);
});
var line = d3.svg.line().interpolate(interpolation).x(function (d) {
if (interpolation == "step-before") return x(d.x + d.dx / 2);
return x(d.x);
}).y(function (d) {
return y(d.y);
});
var gPlus = svg.append("g");
var gMinus = svg.append("g");
gPlus.append("path").datum(data).attr("class", "area").attr("d", area).style("fill", violinColor);
gPlus.append("path").datum(data).attr("class", "violin").attr("d", line).style("stroke", violinColor);
gMinus.append("path").datum(data).attr("class", "area").attr("d", area).style("fill", violinColor);
gMinus.append("path").datum(data).attr("class", "violin").attr("d", line).style("stroke", violinColor);
var x = width;
gPlus.attr("transform", "rotate(90,0,0) translate(0,-" + width + ")"); //translate(0,-200)");
gMinus.attr("transform", "rotate(90,0,0) scale(1,-1)");
}
d3.json("/api/photos/tree/map", function(data){
var treemap = d3.layout.treemap()
.size([500, 500])
.nodes(data);
var cells = canvas.selectAll(".cell")
.data(treemap)
.enter()
.append("g")
.attr('class', 'cell');
cells.append('rect')
.attr('x', d => d.x )
.attr('y', d => d.y )
.attr('width', d => d.dx )
.attr('height', d => d.dy )
.attr('fill', d => d.children ? null : color(d.parent.name) )
.attr('stroke', '#ffffff' );
cell.append('text')
.attr('x', d => d.x + d.dx/2 )
.attr('y', d => d.y + d.dy/2 )
.attr('text-anchor', 'midlde')
.text(d => d.children ? null : d.name);
})
/**
* Constructs a tree instance using default properties
* or properties passed in a config object.
*
* @constructor
* @param {Object} config - values for initial tree state
*/
constructor(config = DEF_CONFIG) {
this.data = config.adjList || DEF_CONFIG.adjList;
this.elem = config.elem || DEF_CONFIG.elem;
this.diameter = config.diameter || DEF_CONFIG.diameter;
this.singleLayer = config.singleLayer || DEF_CONFIG.singleLayer;
this.hashmap = config.hashmap;
if(this.data.length) {
this.data = new Map(this.data);
}
if (this.data.size !== 0) {
this.data = this._translateAdjList(this.data);
}
this.visual = d3.layout.cluster()
.size([360, this.diameter / 2 - 150])
.sort(null);
this.diagonal = d3.svg.diagonal.radial()
.projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });
this.svg = d3.select(this.elem)
.append('svg')
.attr('width', this.diameter)
.attr('height', this.diameter)
.append('g')
.attr('transform', 'translate(' + this.diameter / 2 + ',' + this.diameter / 2 + ')');
}
initGraph () {
this.arc = d3.svg.arc()
.outerRadius(this.radius - 10)
.innerRadius(0)
.bind(this)
this.pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d.population
})
this.svg = d3.select(this.container).append('svg')
.attr('width', '100%')
.attr('height', '100%')
.attr('viewBox','0 0 '+Math.min(this.width, this.height)+' '+Math.min(this.width, this.height))
.attr('perserveAspectRatio', 'xMinYMid')
this.group = this.svg.append('g')
.attr('transform', 'translate(' + this.width / 2 + ',' + this.height / 2 + ')');
this.pieces = this.group.selectAll('.arc')
.data( this.pie(dataset) )
.enter().append('g')
.attr('class', 'arc')
this.pieces.append('path')
.attr('d', this.arc)
this.pieces.style('fill', function(d) {
return this.colors(d.data.age)
}.bind(this))
}
displayRadialGraph: function(target_elem, data_sub, data_total) {
var targetElemBox = $("#" + target_elem).get(0);
var targetElemP = $("#" + target_elem + "_p").get(0);
if(!data_sub || !data_total) {
targetElemP.innerHTML = "N/A";
} else {
var parseData = [
//parsing data to 2 decimal positions
{ label: gettext("Hours spent on content"), count: Math.round((data_sub * 100)/data_total) },
{ label: gettext("Other activites (exercises, etc.)"), count: Math.round(((data_total - data_sub) * 100)/data_total) }
];
//adjusting the graph's size based on target_elem's sizing
var width = targetElemBox.clientWidth;
var height = targetElemBox.clientHeight;
var radius = (Math.min(width, height) / 2);
var color = d3.scale.category20();
var svg = d3.select("#" + target_elem)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
var arc = d3.svg.arc()
.innerRadius(radius - radius/6)
.outerRadius(radius);
var pie = d3.layout.pie()
.value(function(d) { return d.count; })
.sort(null);
var path = svg.selectAll("path")
.data(pie(parseData))
.enter()
.append("path")
.attr("d", arc)
.attr("fill", function(d, i) {
return color(d.data.label);
});
//parsing to 2 decimals
var content_percentage = Math.round((data_sub * 100)/data_total);
targetElemP.innerHTML = content_percentage + "%";
//this will display relevant data when you hover over that data's arc on the radial graph
path.on('mouseover', function(d) {
targetElemP.innerHTML = (d.data.label + ": " + d.data.count + "%");
});
//when not hovering, you'll see the content percentage
path.on('mouseout', function() {
targetElemP.innerHTML = content_percentage + "%";
});
}
},
draw: function (options, width) {
var data = options.data;
var clickHandler = options.clickHandler;
var mouseOverHandler = options.mouseOverHandler;
var mouseLeaveHandler = options.mouseLeaveHandler;
var height;
var color;
if (width > AppConstants.SUNBURST_MAX_WIDTH) {
width = AppConstants.SUNBURST_MAX_WIDTH;
}
height = width;
if (!data) {
return;
}
radius = Math.min(width, height) / 2.2;
color = d3.scale.category20c();
x = d3.scale.linear().range([0, 2 * Math.PI]);
y = d3.scale.sqrt().range([0, radius]);
partition = d3.layout.partition().value(function (d) {
return d.size;
});
arc = d3.svg.arc()
.startAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x))); })
.endAngle(function (d) { return Math.max(0, Math.min(2 * Math.PI, x(d.x + d.dx))); })
.innerRadius(function (d) { return Math.max(0, y(d.y)); })
.outerRadius(function (d) { return Math.max(0, y(d.y + d.dy)); });
d3.select('#sunburst-chart svg').remove();
svg = d3.select('#sunburst-chart')
.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('id', 'sunburstd3-chart-container')
.attr('transform', 'translate(' + (width / 2) + ',' + (height / 2) + ')');
// fill data into svg
svg.selectAll('path')
.data(partition.nodes(data))
.enter().append('path')
.attr('d', arc)
.style('fill', function (d) {
if (!AppConstants.SUNBURST_ARC_COLORS[d.name]) {
AppConstants.SUNBURST_ARC_COLORS[d.name] = color(sum(d));
}
return AppConstants.SUNBURST_ARC_COLORS[d.name];
})
.on('click', clickHandler)
.on('touchstart', clickHandler)
.on('mouseover', mouseOverHandler);
d3.select('#sunburstd3-chart-container')
.on('mouseleave', mouseLeaveHandler);
},
resetForce() {
this.state.force = d3.layout.force()
.gravity(this.props.gravity)
.charge((d, i) => { return i ? 0 : this.props.charge; })
.nodes(this.state.nodes)
.size([this.props.width, this.props.height]);
this.state.force.start();
}
componentDidMount: function () {
_.bindAll(this, ['updateNodes']);
this.layout = d3.layout.force()
.on('tick', this.updateNodes);
this.componentWillReceiveProps(this.props);
},
render() {
var el = RFD.createElement('g');
var sel = d3.select(el);
sel.attr('transform', generateTranslateString(this.margins.left, this.margins.top));
var treemap = d3.layout.treemap()
.value(this.props.valueFn)
.size([this.widthSpan, this.heightSpan])
.sort(this.props.dataSort);
// extend copies the array first
var data = this.props.dataProcessor(this.props.data);
var nodes = sel.datum(data).selectAll('.node')
.data(treemap.nodes);
var nodeEnter = nodes.enter().append('g')
.classed('node', true)
.on('mouseenter', this.props.enterFn)
.on('mouseleave', this.props.leaveFn)
.on('touchstart', this.props.enterFn)
.attr({
transform : d => generateTranslateString(d.x, d.y)
});
var self = this;
nodeEnter.each(function(d) {
var sel = d3.select(this);
sel.append('rect')
.attr({
fill : self.props.colourScale,
width : d => Math.max(0, d.dx - self.props.spacing),
height : d => Math.max(0, d.dy - self.props.spacing)
});
if(d.applicants && d.hideText !== true && d.dx > 50 && d.dy > 30) {
var txt = sel.append('text')
.classed('node-label', true)
.attr({
'font-size' : 14,
x : d.dx / 2,
y : d.dy / 2 - 3,
'text-anchor' : 'middle'
});
txt.append('tspan')
.classed('node-country-name', true)
.text(d.countryName);
txt.append('tspan')
.classed('node-country-value', true)
.text(self.props.valueFormat(d.applicants))
.attr({
x : d.dx / 2, dy: 16
});
}
});
return el.toReact();
}
constructor(props) {
super(props);
this.treemap = d3.layout.treemap()
.children(d => d.children)
.value(d => d.size)
.size([WIDTH, HEIGHT]);
this.state = { prev: {} };
}
//update the layout
function update(data){
//scale the larger familys to have a greater charge
var cscale = d3.scale.linear()
.domain([0, max])
.range([10, 1200]);
var force = d3.layout.force()
.nodes(data)
.size([width, height])
.charge(d => Math.floor(cscale(d.species.length) * -1))
.friction(.9)
.gravity(.21);
//animate the x and y cordinates for each circle
force.on("tick", () => {
nodes.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
var rscale = d3.scale.linear()
.domain([0, max])
.range([5, 70]);
var color = d3.scale.category20c();
//Assign the new data set
var nodes = svg.selectAll('circle')
.data(data);
//Update with new dataset
nodes.enter()
.append('circle')
.on('click', d => showSpecies(d, color))
.on("mouseover", d => {
const event = d3.event;
div.transition()
.duration(200)
.style("opacity", .9);
div.html(`<span>${d.family} : ${d.species.length} </span>`)
.style("left", (event.x + 30) + "px")
.style("top", (event.y - 30) + "px");
})
.on("mouseout", d => {
div.transition()
.duration(200)
.style("opacity", 0);
})
.attr('r', d => rscale(d.species.length))
.style('fill', (d, i) => color(i));
//start the force layout
nodes.call(force.start);
}
stats.createPie = function(puddle, puddleGroup, data) {
var xOffset = (pool.width()/3) * (1/6);
var yOffset = pool.height() / 2;
puddleGroup.selectAll('.d3-stats-pie').remove();
var pieGroup = puddleGroup.append('g')
.attr({
transform: 'translate(' + xOffset + ',' + yOffset + ')',
class: 'd3-stats-pie'
});
if (stats.hasNaN(data)) {
puddleGroup.classed('d3-insufficient-data', true);
pieGroup.append('circle')
.attr({
cx: 0,
cy: 0,
r: opts.pieRadius
});
var annotationOpts = {
x: xOffset + puddle.xPosition(),
y: yOffset,
hoverTarget: puddleGroup
};
_.defaults(annotationOpts, opts.defaultAnnotationOpts);
pool.parent().select('#tidelineAnnotations_stats').call(annotation, annotationOpts);
return null;
}
else {
puddleGroup.on('mouseover', null);
puddleGroup.on('mouseout', null);
puddleGroup.classed('d3-insufficient-data', false);
pie = d3.layout.pie().value(function(d) {
return d.value;
})
.sort(null);
arc = d3.svg.arc()
.innerRadius(0)
.outerRadius(opts.pieRadius);
var slices = pieGroup.selectAll('g.d3-stats-slice')
.data(pie(data))
.enter()
.append('path')
.attr({
d: arc,
class: function(d) {
return 'd3-stats-slice d3-' + d.data.type;
}
});
return slices;
}
};
exports.drawPie = function (parentElem, data) {
var width = 120,
height = 120;
var radius = Math.min(width, height) / 2;
var colors = data.map(function (item) {
return item.color;
});
var color = d3.scale.ordinal()
.range(colors);
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function (d) {
return d.val;
});
var svg = d3.select(parentElem).append("svg")
//.attr("width", "100%")
// .attr("height", height)
.attr("viewBox", "0, 0, " + width + ", " + height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
data.forEach(function (d) {
d.val = +d.val;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function (d) {
return color(d.data.lbl);
});
g.append("text")
.attr("transform", function (d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("dy", ".35em")
.style("text-anchor", "middle")
.attr('class', 'pie-text')
.text(function (d) {
return d.data.lbl;
});
};
constructor() {
super();
this.force = d3.layout.force();
this.state = {
dragging: null,
drawing: null,
hoveringOver: null
};
this.laidOut = false;
this.taskCircles = {};
}
return function(junctions, newJunctions) {
var arc = d3.svg.arc()
.innerRadius(junctionRadius)
.outerRadius(dependencyArcRadius),
pie = d3.layout.pie()
.sort(null)
.value(function(d, i) {
return d.value;
});
var dependenceArc = junctions.selectAll("path")
.data(
function(d, i) {
var dependence = d.collapsed ? 0 : d.dependence,
independence = 1 - dependence;
return pie([
{type: "dependence", color: "black", node: d, value: dependence},
{type: "independence", color: "white", node: d, value: independence}
]);
},
function(d, i) {
return d.data.type;
}
);
dependenceArc.exit().remove();
dependenceArc.enter()
.append("path")
.attr("fill", function(d, i){
return d.data.color;
})
.attr("stroke-width", 0.4)
.call(dragDependency);
dependenceArc
.attr("d", arc)
.style("visibility", function(d, i) {
/*
If detail is off, make sure we're always hidden.
Otherwise, we'll just inherit this value.
*/
return d.data.node.detail ? null : "hidden";
});
junctions.call(onScroll, function(d, i, change) {
var node = getNodeCollection()
.get(d.id);
node.dependence(d.dependence + change);
update();
});
};
data.forEach((d) => {
let b = d3.layout.histogram().bins(numBins)(d.values);
const color = getColorFromScheme(d.key, slice.formData.color_scheme);
const w = d3.max([(x(b[0].dx) - x(0)) - 1, 0]);
const key = d.key;
// normalize if necessary
if (normalized) {
const total = d.values.length;
b = b.map(v => ({ ...v, y: v.y / total }));
}
bins = bins.concat(b.map(v => ({ ...v, color, width: w, key, opacity })));
});
create(data) {
this.legendRectSize = 18;
this.legendSpacing = 4;
this.data = data;
const numberOfItems = Object.keys(data).length;
const width = this.props.width;
const height = this.props.height;
const svgHeight = this.getHeight(numberOfItems);
const radius = Math.min(width, height) / 2;
const halfWidth = width / 2;
const halfHeight = height / 2;
this.arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(this.props.innerRadius);
this.pie = d3.layout.pie()
.sort(null)
.value(d => { return d.value; });
this.svg = d3.select(this.el).append("svg")
.attr("width", width)
.attr("height", svgHeight)
.append("g")
.attr("transform", `translate(${halfWidth}, ${halfHeight})`);
this.path = this.svg.selectAll("path")
.data(this.pie(d3.entries(data)))
.enter().append("path");
this.path
.attr("fill", (d, i) => { return this.color(i); })
.attr("d", this.arc)
.each(d => {
// Let's keep a reference to the
// original angles to make use of
// in our arcTween helper.
this.originalAngles = d;
})
.on("mouseover", this.onMouseOver.bind(this))
.on("mousemove", this.onMouseMove.bind(this))
.on("mouseout", this.onMouseOut.bind(this));
if (this.showTooltips) {
this.addTooltips();
}
if (this.showLegend) {
this.addLegend();
}
}
_stackData: function _stackData(props) {
var offset = props.offset;
var order = props.order;
var x = props.x;
var y = props.y;
var values = props.values;
var data = this._data;
var stack = d3.layout.stack().offset(offset).order(order).x(x).y(y).values(values);
this._data = stack(this._data);
}
exports.setupLayout = function(size) {
var nNodes = 100,
width = size.w,
height = size.h,
k = Math.sqrt(nNodes / (width * height));
return d3.layout.force()
.size([width, height])
.gravity(100 * k)
.linkDistance(20) // 80
.charge(-25 / k); // -8000
};
plugin.render = function(id, data, config) {
$(id).empty();
var count = data.reduce(function(prev, curr) {
return prev + curr[config.value];
}, 0);
if (count === 0 || isNaN(count)) {
$(id).append('<p class="error">Sorry, there is not enough data to display the chart. Add at least one scene to your script.</p>');
return;
}
var vis = d3.select(id)
.append('svg:svg')
.data([data])
.attr('width', 200)
.attr('height', 200)
.style('margin-left', 'auto')
.style('margin-right', 'auto')
.append('svg:g')
.attr('transform', 'translate(100,100)');
var arc = d3.svg.arc().outerRadius(100);
var pie = d3.layout.pie().value(function(d) {
return d[config.value];
});
var arcs = vis.selectAll('g')
.data(pie)
.enter()
.append('svg:g');
arcs.append('svg:path')
.attr('fill', function(d) {
return config.color(d);
}).attr('d', arc)
.on("mouseover", function(d) {
config.show_tooltip(config.tooltip(d));
})
.on("mousemove", function() {
config.move_tooltip(d3.event.pageX, d3.event.pageY);
})
.on("mouseout", function() {
config.hide_tooltip();
});
vis.append('svg:circle')
.attr('fill', 'none')
.attr('stroke', '#000000')
.attr('stroke-width', '1')
.attr('cx', '0')
.attr('cy', '0')
.attr('r', '100');
};