d3_line_test.js

/* Implementation */

function renderLines(xScale, yScale, data) {
  var lineGenerator = getLineGenerator(xScale, yScale);
  d3.selectAll('path')
    .data(data)
    .enter()
    .append('path')
      .attr('d', lineGenerator);
}

function getLineGenerator(xScale, yScale) {
  return d3.svg.line()
    .x(lineX.bind(undefined, xScale))
    .y(lineY.bind(undefined, yScale));
}

function lineX(xScale, datum) {
  return xScale(datum.x);
}

function lineY(yScale, datum) {
  return yScale(datum.y);
}

/* Test */

describe('#getLineGenerator', function() {
  var generator;

  beforeEach(function() {
    var xScale = d3.scale.linear().domain([0, 10]).range([0, 100]);
    var yScale = d3.scale.linear().domain([0, 10]).range([0, 1000]);
    generator = getLineGenerator(xScale, yScale);
  });

  it('returns the correct x-values', function() {
    var generatorX = generator.x(); // Returns the accessor function for x
    assert.strictEqual(generatorX({x: 0, y: 0}), 0);
    assert.strictEqual(generator({x: 10, y: 0}), 100);
  });

  it('returns the correct y-values', function() {
    var generatorY = generator.y(); // Returns the accessor function for y
    assert.strictEqual(generatorY({x: 0, y: 0}), 0);
    assert.strictEqual(generatorY({x: 0, y: 10}), 1000);
  });
});