如何为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);

    });
}