Skip to content

Instantly share code, notes, and snippets.

const circle = d3.select('circle');
function transition(radius, duration) {
circle.transition()
.duration(duration)
.attr('r', radius);
}
describe('#transition', () => {
beforeEach(() => {
const circle = d3.select('circle');
function transition(radius, duration) {
circle.transition()
.duration(duration)
.attr('r', radius);
}
describe('#transition', () => {
it('correctly transitions circle radius', () => {
const d3SelectionProto = Object.assign({}, d3.selection.prototype);
const D3TestUtils = {
stubAndForceTransitions() {
d3.selection.prototype.transition = function() {
return this;
};
d3.selection.prototype.duration = function() {
return this;
const D3TestUtils = {
clockTick(milliseconds) {
const currentNow = Date.now();
Date.now = function() {
return currentNow + milliseconds;
}
d3.timer.flush();
}
const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
const MyTooltipComponent = require('my-tooltip-component');
class MyGraphComponent extends React.Component {
componentDidMount() {
this.drawChart();
}
shouldComponentUpdate() {
const React = require(‘react’);
const ReactDOM = require(‘react-dom’);
class MyGraphComponent extends React.Component {
componentDidMount() {
/* D3 code to append elements to this.svg */
}
shouldComponentUpdate() {
return false; // This prevents future re-renders of this component
describe('#renderLines', function() {
var xScale;
var yScale;
beforeEach(function() {
xScale = d3.scale.linear().domain([0, 10]).range([0, 100]);
yScale = d3.scale.linear().domain([0, 10]).range([0, 1000]);
});
it('renders lines correctly for a small 1-line data set', function() {
/* Implementation */
function getXScale(dimensions, data) {
var range = [0, dimensions.width];
var domain = [0, data.length - 1];
return d3.scale.linear().domain(domain).range(range);
}
/* Test */
/* Implementation */
function renderLines(xScale, yScale, data) {
var lineGenerator = getLineGenerator(xScale, yScale);
d3.selectAll('path')
.data(data)
.enter()
.append('path')
.attr('d', lineGenerator);
}
/* Implementation */
function renderCircles(xScale, yScale, data) {
d3.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr('cx', circleCX.bind(undefined, xScale)
.attr('cy', circleCY.bind(undefined, yScale);
}