line break down

<!DOCTYPE html>
<meta charset="utf-8">

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke-width: 1.5px;
  cursor: pointer;
}

.split-group {
  float: left;
}

</style>

<body>
  <button onClick=drawSplit()>split</button>
  <button onClick=drawSeperate()>seperate</button>
</body>

var data = [
  {
    date: "1-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 150,
        name: "B",
      },
      {
        sales: 50,
        name: "C"
      }
    ]
  },
  {
    date: "2-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 0,
        name: "B",
      },
      {
        sales: 0,
        name: "C"
      }
    ]
  },
  {
    date: "3-Jan-15",
    children: [
      {
        sales: 50,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 400,
        name: "C"
      }
    ]
  },
  {
    date: "4-Jan-15",
    children: [
      {
        sales: 75,
        name: "A"
      },
      {
        sales: 150,
        name: "B",
      },
      {
        sales: 100,
        name: "C"
      }
    ]
  },
  {
    date: "5-Jan-15",
    children: [
      {
        sales: 250,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 400,
        name: "C"
      }
    ]
  },
  {
    date: "6-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 200,
        name: "B",
      },
      {
        sales: 100,
        name: "C"
      }
    ]
  },
  {
    date: "7-Jan-15",
    children: [
      {
        sales: 100,
        name: "A"
      },
      {
        sales: 50,
        name: "B",
      },
      {
        sales: 300,
        name: "C"
      }
    ]
  }
]

summedData = data.map(function (d) {
  return {
    date: new Date(d.date),
    sales: d3.sum(d.children, function (child) { return child.sales; })
  };
})

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 900 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.time.scale()
    .range([0, width]);
var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = function(scale, format) {
  if (format == null || format == undefined) {
    format = function (d) {
      return parseDate(d);
    };
  };

return d3.svg.axis()
      .scale(scale)
      .orient('bottom')
      .ticks(function () { return summedData.map(function(d) { return d.date; })})
      .tickFormat(format);
}

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('left');

var line = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sales); });

var svg = d3.select('body').append('svg')
    .attr('width', width + margin.left + margin.right)
    .attr('height', height + margin.top + margin.bottom)
  .append('g')
    .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

x.domain(d3.extent(summedData, function(d) { return d.date; }));
y.domain([0, d3.max(summedData, function(d) { return d.sales; })]);

drawXAxis = function () {
  svg.append('g')
    .attr('class', 'x axis')
    .attr('transform', 'translate(0,' + height + ')')
    .attr('width', 200)
    .call(xAxis(x));
}

drawYAxis = function () {
  svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis)
    .append('text')
      .attr('tranform', 'rotate(-90)')
      .attr('y', 6);
}

drawAxis = function () {
  drawXAxis();
  drawYAxis();
};

drawLine = function (lineData, colour, name) {
  newLine = svg.append('g').classed('group-' + name, true)
    .append('path')
    .datum(lineData)
    .attr('class', 'line ' + name)
    .attr('d', line)
    .style('stroke', colour);

return newLine;
}

drawAnimationLine = function (startLineData, splitData, name) {
  var overlay = svg.append('g');

lines = overlay.selectAll('.' + name)
            .data([startLineData]);

lines.enter().append('path').attr('class', 'newLine line ' + name)
      .attr('d', function(d) { return line(d); })
      .style('stroke', colours[name]);

lines.data([splitData]).transition()
      .attr('d', function(d) { return line(d); });

lines.exit().remove();
};

groups = ["A", "B", "C"];
colours = {
  A: "steelblue",
  B: "slategray",
  C: "teal"
};

splitData = [];
groups.forEach(function(group, i) {
  splitData.push({
    name: group,
    sales: data.map(function(d){
      return {
      date: new Date(d.date),
      sales: d.children[i].sales
    };
  })}
  );
});

console.log(splitData);

drawAll = function () {
  allLine = drawLine(summedData, 'tomato', 'total');
};

drawSplit = function () {
  splitData.forEach(function (data) {
    drawAnimationLine(summedData, data.sales, data.name);
  });
};

drawSeperate = function () {
  //clear out xAxis
  d3.selectAll('.x').remove();

//clear out summed line
  d3.selectAll('.group-total').remove();

splitScale = d3.time.scale()
    .range([0, width / splitData.length])
    .domain(d3.extent(summedData, function(d) { return d.date; }));

splitLine = d3.svg.line()
    .x(function(d) { return splitScale(d.date); })
    .y(function(d) { return y(d.sales); });

splitData.forEach(function (data, i) {
    var splitGroup = svg.append('g').classed('split-group group-' + data.name, true)
      .attr('transform', 'translate(' + (i*width/splitData.length + (10 * i) + ',0)'))

splitGroup.append('path')
        .datum(data.sales)
        .attr('class', 'line ' + data.name)
        .attr('d', splitLine)
        .style('stroke', 'steelblue');

splitGroup.append('g')
        .attr('class', 'x axis')
        .attr('transform', 'translate(0,' + height + ')')
        .attr('width', 200)
        .call(xAxis(splitScale, function (d) { return '';}));

return newLine;
  });
};

drawAxis();
drawAll();
</script>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js