Question

我为笔记本电脑创建了三个cpu，内存和i / o图表，效果很好。我现在正试图包括第二台电脑，并显示相应的三个图表。我创建了一个文件名为var files = ["data1.csv", "data2.csv"]的数组，我很难运行两次代码，以便有六个图形。

 <!DOCTYPE html>
    <meta charset="utf-8">
    <style> /* set the CSS */

    body { font: 14px Arial;}

    path { 
        stroke: black;
        stroke-width: 2;
        fill: none;
    }
    </style>
    <body>

    <!-- load the d3.js library -->    
    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>

    var files = ["data1.csv", "data2.csv"]

    // Set the dimensions of the canvas / graph
    var margin = {top: 30, right: 20, bottom: 30, left: 50},
        width = 400 - margin.left - margin.right,
        height = 250 - margin.top - margin.bottom;

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

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

    // Define the axes
    var xAxis = d3.svg.axis().scale(x)
        .orient("bottom").ticks(5);

    var yAxis = d3.svg.axis().scale(y)
        .orient("left").ticks(5);

    // Define the line
    var user = d3.svg.line()
        .x(function(d) { return x(d.timestamp); })
        .y(function(d) { return y(d.user); });

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

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

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

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

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

   var funcs = {};
   for (var l = 0; l < files.length; l++) {
     funcs[l] = function(i) {

      console.log("0"+window["chart" + i*3]);
       window["chart" + i*3]  = 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 + ")");

       window["chart" + i*3 +1]  = 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 + ")");

       window["chart" + i*3 +2]  = 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 + ")");

      console.log("1"+window["chart" + i*3]);



        d3.csv(files[i], function(error, data) {
            data.forEach(function(d) {
                  d.timestamp = parseTime(d.timestamp);
                  d.user = +d.user;
                  d.system = +d.system;
                  d.memFree = +d.memFree;
                  d.memUsed = +d.memUsed;
                  d.sda = +d.sda;
                  d.sdb = +d.sdb;
            });

            console.log("2"+window["chart" + i*3]);
            var min = d3.min(data, function(d) { return Math.min(d.user, d.system); });
            console.log("3"+window["chart" + i*3]);
            x.domain(d3.extent(data, function(d) { return d.timestamp; }));
            console.log("4"+window["chart" + i*3]);
            y.domain([min, d3.max(data, function(d) { return Math.max(d.user, d.system); })]);

          console.log("5"+window["chart" + i*3]);
          window["chart" + i*3].append("path")
              .data([data])
              .attr("class", "userLine")
              .style("stroke", "green")
              .attr("d", user(data));

          window["chart" + i*3].append("path")
              .data([data])
              .attr("class", "systemLine")
              .style("stroke", "blue")
              .attr("d", system(data));

          window["chart" + i*3].append("path")
              .data([data])
              .attr("class", "iowaitLine")
              .style("stroke", "red")
              .attr("d", iowait(data));

          // Add the X Axis
          window["chart" + i*3].append("g")
              .attr("transform", "translate(0," + height + ")")
              .attr("class", window["chart" + i*3]+"xAxis")
              .call(xAxis);

          // Add the Y Axis
          window["chart" + i*3].append("g")
              .attr("class", window["chart" + i*3]+"yAxis")
              .call(yAxis);

          window["chart" + i*3].append("text")
            .attr("transform", "translate(" + (width/4) + "," + y(data[0].user) + ")")
            .attr("text-anchor", "start")
            .style("fill", "green")
            .text("%user");

          window["chart" + i*3].append("text")
            .attr("transform", "translate(" + (width/5) + "," + y(data[0].system) + ")")
            .attr("text-anchor", "start")
            .style("fill", "blue")
            .text("%system");
        });


        d3.csv(files[i], function(error, data) {
            data.forEach(function(d) {
                  d.timestamp = parseTime(d.timestamp);
                  d.user = +d.user;
                  d.system = +d.system;
                  d.memFree = +d.memFree;
                  d.memUsed = +d.memUsed;
                  d.sda = +d.sda;
                  d.sdb = +d.sdb;
            });

            // Scale the range of the data
          var min = d3.min(data, function(d) { return Math.min(d.memFree, d.memUsed); });
          x.domain(d3.extent(data, function(d) { return d.timestamp; }));
          y.domain([min, d3.max(data, function(d) { return Math.max(d.memFree, d.memUsed); })]);

          window["chart" + i*3 +1].append("path")
              .data([data])
              .attr("class", "memFreeLine")
              .style("stroke", "green")
              .attr("d", memFree(data));

          window["chart" + i*3 +1].append("path")
              .data([data])
              .attr("class", "memUsedLine")
              .style("stroke", "blue")
              .attr("d", memUsed(data));

          // Add the X Axis
          window["chart" + i*3 +1].append("g")
              .attr("transform", "translate(0," + height + ")")
              .attr("class", window["chart" + i*3+1]+"xAxis")
              .call(xAxis);

          // Add the Y Axis
          window["chart" + i*3 +1].append("g")
               .attr("class", window["chart" + i*3+1]+"yAxis")
              .call(yAxis);

          window["chart" + i*3 +1].append("text")
            .attr("transform", "translate(" + (width/4) + "," + y(data[0].memFree) + ")")
            .attr("text-anchor", "start")
            .style("fill", "green")
            .text("memFree");

          window["chart" + i*3 +1].append("text")
            .attr("transform", "translate(" + (width/2) + "," + y(data[0].memUsed) + ")")
            .attr("text-anchor", "start")
            .style("fill", "blue")
            .text("memUsed");

        });

        d3.csv(files[i], function(error, data) {
            if (error) throw error;
            data.forEach(function(d) { 
                    d.timestamp = parseTime(d.timestamp);
                    d.user = +d.user;
                    d.system = +d.system;
                    d.memFree = +d.memFree;
                    d.memUsed = +d.memUsed;
                    d.sda = +d.sda;
                    d.sdb = +d.sdb;
                  });

            // Scale the range of the data
            var min = d3.min(data, function(d) { return d.sda, d.sdb; });
            x.domain(d3.extent(data, function(d) { return d.timestamp; }));
            y.domain([min, d3.max(data, function(d) { return Math.max(d.sda, d.sdb); })]);

            window["chart" + i*3 +2].append("path")
                .data([data])
                .attr("class", "sdaLine")
                .style("stroke", "green")
                .attr("d", sda);

            window["chart" + i*3 +2].append("path")
                .data([data])
                .attr("class", "sdbLine")
                .style("stroke", "blue")
                .attr("d", sdb);

            window["chart" + i*3 +2].append("path")
                .data([data])
                .attr("class", "nvme0n1Line")
                .style("stroke", "red")
                .attr("d", nvme0n1);

            // Add the X Axis
            window["chart" + i*3 +2].append("g")
                .attr("transform", "translate(0," + height + ")")
                .attr("class", window["chart" + i*3*2]+"xAxis")
                .call(xAxis);

            // Add the Y Axis
            window["chart" + i*3 +2].append("g")
            .attr("class", window["chart" + i*3+2]+"yAxis")
                .call(yAxis);

            window["chart" + i*3 +2].append("text")
              .attr("transform", "translate(" + (width/2) + "," + y(data[0].sda) + ")")
              .attr("text-anchor", "start")
              .style("fill", "green")
              .text("sda");

             window["chart" + i*3 +2].append("text")
              .attr("transform", "translate(" + (width/2) + "," + y(data[0].sdb) + ")")
              .attr("text-anchor", "start")
              .style("fill", "blue")
              .text("sdb");

          });
     }.bind(this, l);
}


    </script>
    </body>

我预计以这种方式最初我会有chart0，chart1，chart2，然后是chart3，chart4，chart5。如果我要添加第三台PC，我只需要更新阵列。不幸的是，它不起作用。

我在

后打印我的i var

d3.csv(files[iBound], function(error, data) {

我正在失去它。我试图以这种方式绑定我（正如我在我的代码中所示）但无法弄明白。这样它就什么都不做。

基于此example我也试过了

var funcs = {};
for (var l = 0; l < files.length; l++) {
    funcs[l] = function(j) {

    console.log("0"+window["chart" +  j*3]);
     window["chart" + j*3]  = 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 + ")");

     window["chart" + j*3 +1]  = 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 + ")");

     window["chart" + j*3 +2]  = 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 + ")");

    console.log("1"+window["chart" + i*3]);
 }.bind(this, l);
}

for (var i = 0; i < files.length; i++) {  
  funcs[i]();
    d3.csv(files[i], function(error, data) {
        data.forEach(function(d) {
              d.timestamp = parseTime(d.timestamp);
              d.user = +d.user;
              d.system = +d.system;
              d.iowait = +d.iowait;
              d.memFree = +d.memFree;
              d.memUsed = +d.memUsed;
              d.sda = +d.sda;
              d.sdb = +d.sdb;
              d.nvme0n1 = +d.nvme0n1;
        });


        console.log("2"+window["chart" + i*3]);

但我再次未定义。有什么帮助吗？

更新我只有一个图表，其中两行包含data1.csv文件中的数据。我想要使用来自不同文件的数据的相同图表。这就是我到目前为止所做的。 JSFiddle

Answer 1

i变量的值为4，然后才能发生任何CSV加载，因此您需要记住＆＃34;执行其余代码时的值。

查看这些答案以获取更多信息：

我建议将代码包装到函数中并绑定i值，例如：

for (var i = 0; i < 3; i++) {
    function(iBound) {
        d3.csv(files[iBound], function(error, data) {
            // etc.
        });
        // etc
    }.bind(this, i); // Bind the value
}

在d3.js中创建来自不同文件的多个图形

1 个答案: