D3.js Multiple lines on a chart

Question

The lines of my chart are drawing off my chart. I've tried to replace this code:

yE.domain(d3.extent(data, function(E) { return E.close;}));   

With this:

yE.domain([0,d3.max(data, function(E) {
    return Math.max(E.close, E.Map1, EMap2, E.MapII);
})]);

Based on the answer from Bill: d3.js: dataset array w/ multiple y-axis values

Mine doesn't work.

My entire code:

var marginE = {top: 30, right: 20, bottom: 30, left: 50},
    widthE = 400 - marginE.left - marginE.right,
    heightE = 270 - marginE.top - marginE.bottom;

// Parse the date / time
var parseDateTimeE = d3.time.format("%Y-%m-%d%H:%M").parse;

// Set the ranges
var xE = d3.time.scale().range([0, widthE]);
var yE = d3.scale.linear().range([heightE, 0]);
// Define the axEs
var xAxisE = d3.svg.axis().scale(xE)
    .orient("bottom").ticks(6);

var yAxisE = d3.svg.axis().scale(yE)
    .orient("left").ticks(6);

var areaE = d3.svg.area()
    .interpolate("bundle")
    .x(function(e) { return xE(e.date); })
    .y0(heightE)
    .y1(function(e) { return yE(e.close); });

// Adds the svg canvas
var svgE = d3.select(".eur")
    .append("svg")
        .attr("width", widthE + marginE.left + marginE.right)
        .attr("height", heightE + marginE.top + marginE.bottom)
        .attr('id', 'charteur')
        .attr('viewBox', '0 0 400 270')
        .attr('perserveAspectRatio', 'xMinYMid')
    .append("g")
         .attr("transform",'translate(' + marginE.left + ',' + marginE.top + ')')
         .attr('width', widthE)
         .attr('height', heightE)
         .style("font-size","12px");

// Get the data
d3.json("php/downl_EUR.php", function(error, data) {
    data.forEach(function(E) {
        E.date = parseDateTimeE(E.date +E.time);
        E.close = +E.close;
        E.MaP1 = +E.MaP1;
        E.MaP2 = +E.MaP2;
        E.MaPII = +E.MaPII;  });

    // Define the line
    var valuelineE = d3.svg.line()
    .interpolate("bundle")
    .x(function(E) { return xE(E.date); })
    .y(function(E) { return yE(E.close); });

    var valuelineE2 = d3.svg.line()
    .interpolate("bundle")
    .x(function(E) { return xE(E.date); })
    .y(function(E) { return yE(E.MaP1); });

    var valuelineE3 = d3.svg.line()
    .interpolate("bundle")
    .x(function(E) { return xE(E.date); })
    .y(function(E) { return yE(E.MaP2); });

    var valuelineE4 = d3.svg.line()
    .interpolate("bundle")
    .x(function(E) { return xE(E.date); })
    .y(function(E) { return yE(E.MaPII); });

    // Scale the range of the data
    xE.domain(d3.extent(data, function(E) { return E.date; }));
    yE.domain(d3.extent(data, function(E) { return E.close;}));         //****
  //yE.domain([0,d3.max(data, function(E) {return Math.max(E.close, E.MapII);})]);   ****

   svgE.append("path")
        .datum(data)
        .attr("class", "area")
        .attr("d", areaE);

    // Add the valueline path.
    svgE.append("path")
        .attr("class", "lineE")
        .style("stroke", "steelblue")
        .attr("d", valuelineE(data));

    svgE.append("path")
        .attr("class", "lineE")
        .style("stroke", "red")
        .attr("d", valuelineE2(data));

    svgE.append("path")
        .attr("class", "lineE")
        .style("stroke", "green")
        .attr("d", valuelineE3(data));
    svgE.append("path")
        .attr("class", "lineE")
        .style("stroke-dasharray", ("3, 3"))
        .attr("d", valuelineE4(data));

    // Add the X Axis
    svgE.append("g")
        .attr("class", "XaxisE")
        .attr("transform", "translate(0," + heightE + ")")
        .call(xAxisE);

    // Add the Y Axis
    svgE.append("g")
        .attr("class", "YaxisE")
        .call(yAxisE);  });

Answer 1

I found the solution myself. Instead of MaP1, Map2 & MaPII, use map1, map2 and mapii -> no capital letters !! (also in the php-file) Everything works fine now...