Untitled

var width = $('svg').width();
var height = $('svg').height();
var svg = d3.select('svg');
var g = svg.append('g');
var branches = [];
var line;
var trunk;
var createLeftBranch;

svg
  .attr('width', width)
  .attr('height', height);

line = d3.svg.line()
  .x(function(d) { return d.x; })
  .y(function(d) { return d.y; })
  .interpolate('basis');

trunk = [
  { 'x': width/2, 'y': height },
  { 'x': width/2, 'y': height - 100 }
];

branches.push(trunk);

createLeftBranch = function(parent) {

  var branch = [
    { 'x': 0, 'y': 1 },
    { 'x': 0, 'y': 10 }
  ];

  return branch;

};

branches.push(createLeftBranch(trunk));

g.selectAll('path')
  .data(branches)
  .enter().append('path')
  .attr('d', line)
  .style('stroke-width', 10);