D3.js圖表​​上的多條線

Question

我的圖表中的線條正在繪製我的圖表。我試着將這段代碼：

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

有了這個：

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

根據比爾的回答：d3.js: dataset array w/ multiple y-axis values

礦不起作用。

我的整個代碼：

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

我找到了自己的解決方案。而不是MaP1，Map2 & MaPII，使用map1，map2和mapii - >沒有大寫字母！ （也在php文件中） 現在一切正常......