如何爲csv中的每個列創建單獨的圖表

Question

我有一個csv，並且我想爲每個品牌+日期單獨繪製圖表。

date,Apple,Google,Amazon,Microsoft,IBM,Facebook 
    2015-08-11,113.489998,690.299988,527.460022,46.41,155.509995,93.620003 
    2015-08-10,119.720001,663.140015,524,47.330002,156.75,94.150002 
    2015-08-07,115.519997,664.390015,522.619995,46.740002,155.119995,94.300003 
    2015-08-06,115.129997,670.150024,529.460022,46.619999,156.320007,95.120003 
    2015-08-05,115.400002,673.289978,537.01001,47.580002,157.899994,96.440002 

現在我可以爲每個品牌創建此代碼，並且我得到6個單獨的圖表。但我認爲必須有一個簡單的解決方案。

// Adds the svg canvas 
var chart1 = 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 + ")"); 

// Get the data 
d3.csv("data1.php", function(error, data) { 

    data.forEach(function(d) { 
     d.date = parseDate(d.date); 
     d.m_data = +d.mrr; 
    }); 

    // Scale the range of the data 
    x.domain(d3.extent(data, function(d) { return d.date; })); 
    y.domain([d3.min(data, function(d) { return d.mrr; }), d3.max(data, function(d) { return d.mrr; })]); 

    // Add the valueline path. 
    chart1.append("path") 
     .attr("class", "line") 
     .attr("d", valueline(data)); 

    // Add the X Axis 
    chart1.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis); 

    // Add the Y Axis 
    chart1.append("g") 
     .attr("class", "y axis") 
     .call(yAxis); 

    chart1.append("text") 
     .attr("x", width/2) 
     .attr("y", 0) 
     .style("text-anchor", "middle") 
     .text("mrr"); 

}); 

Answer 1

現在提出，在功能

add_chart("chart1",'mrr'); 
add_chart("chart2",'arr'); 


function add_chart(id,field_name){  

    console.log(id+', ' + field_name); 
    var my_object = {}; 


    // Adds the svg canvas 
    my_object[id] = 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 + ")"); 

    // Get the data 
    d3.csv("data1.php", function(error, data) { 

     data.forEach(function(d) { 
      d.date = parseDate(d.date); 
      d.m_data = +d[field_name]; 
     }); 

     // Scale the range of the data 
     x.domain(d3.extent(data, function(d) { return d.date; })); 
     y.domain([d3.min(data, function(d) { return d[field_name]; }), d3.max(data, function(d) { return d[field_name]; })]); 

     // Add the valueline path. 
     my_object[id].append("path") 
      .attr("class", "line") 
      .attr("d", valueline(data)); 

     // Add the X Axis 
     my_object[id].append("g") 
      .attr("class", "x axis") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 

     // Add the Y Axis 
     my_object[id].append("g") 
      .attr("class", "y axis") 
      .call(yAxis); 

     my_object[id].append("text") 
      .attr("x", width/2) 
      .attr("y", 0) 
      .style("text-anchor", "middle") 
      .text(field_name); 

    }); 
}