Fatal编程技术网
  • javascript/
  • Javascript 在d3.js中自动更新图形

Javascript 在d3.js中自动更新图形

javascript d3.js graph

Javascript 在d3.js中自动更新图形,javascript,d3.js,graph,dashboard,Javascript,D3.js,Graph,Dashboard,基于此，我创建了两个图，每个图有两个度量。每5秒读取一个csv文件，在第一个图形中显示cpu%用户和cpu%系统，在第二个图形中显示内存可用-内存使用 问题是只更新第一个图形的第一行。 当我删除cpu%用户时，它只更新cpu%系统。我不能用它们的轴更新两个图中的所有度量 这里有什么明显的错误吗？ 有没有其他类似于我在d3.js中尝试做的教程 我的代码 <!DOCTYPE html> <meta charset="utf-8"> <style> /* set t

基于此，我创建了两个图，每个图有两个度量。每5秒读取一个csv文件，在第一个图形中显示cpu%用户和cpu%系统，在第二个图形中显示内存可用-内存使用

问题是只更新第一个图形的第一行。 当我删除cpu%用户时，它只更新cpu%系统。我不能用它们的轴更新两个图中的所有度量

这里有什么明显的错误吗？ 有没有其他类似于我在d3.js中尝试做的教程

我的代码

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

body { font: 12px Arial;}

path { 
    stroke: black;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}


</style>
<body>

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

<script>

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 350 - 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); });

// 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 + ")");
var chart2 = 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("data.csv", 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;
    });

    var min = d3.min(data, function(d) { return Math.min(d.user, d.system); });
    x.domain(d3.extent(data, function(d) { return d.timestamp; }));
    y.domain([min, d3.max(data, function(d) { return Math.max(d.user, d.system); })]);

      chart1.append("path")
      .data([data])
      .attr("class", "userLine")
      .style("stroke", "green")
      .attr("d", user(data));

  chart1.append("path")
      .data([data])
      .attr("class", "systemLine")
      .style("stroke", "blue")
      .attr("d", system(data));

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

  // Add the Y Axis
  chart1.append("g")
      .call(yAxis);

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

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

});

d3.csv("data.csv", 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;
    });

    // 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); })]);

  chart2.append("path")
      .data([data])
      .attr("class", "memFreeLine")
      .style("stroke", "green")
      .attr("d", memFree(data));

  chart2.append("path")
      .data([data])
      .attr("class", "memUsedLine")
      .style("stroke", "blue")
      .attr("d", memUsed(data));

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

  // Add the Y Axis
  chart2.append("g")
      .call(yAxis);

  chart2.append("text")
    .attr("transform", "translate(" + (width/4) + "," + y(data[0].memFree) + ")")
    .attr("text-anchor", "start")
    .style("fill", "green")
    .text("memFree");

  chart2.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].memUsed) + ")")
    .attr("text-anchor", "start")
    .style("fill", "blue")
    .text("memUsed");

});

setInterval(function() {
    updateChart1();
    updateChart2();
}, 5000); 

// ** Update data section (Called from the onclick)
function updateChart1() {
    // Get the data again
    d3.csv("data.csv", 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;
        });

    var min = d3.min(data, function(d) { return Math.min(d.user, d.system); });
    x.domain(d3.extent(data, function(d) { return d.timestamp; }));
    y.domain([min, d3.max(data, function(d) { return Math.max(d.user, d.system); })]);

    // Select the section we want to apply our changes to
    var chart1 = d3.select("svg").transition();

    // Make the changes
        chart1.select(".userLine")   // change the line
            .duration(750)
            .attr("d", user(data));
        chart1.select(".systemLine")   // change the line
            .duration(750)
            .attr("d", system(data));

        chart1.select(".x.axis") // change the x axis
            .duration(750)
            .call(xAxis);
        chart1.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

    });
}

function updateChart2() {

    // Get the data again
    d3.csv("data.csv", 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;
        });

        // Scale the range of the data again 
    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); })]);

    // Select the section we want to apply our changes to
    var chart2 = d3.select("svg").transition();

    // Make the changes
        chart2.select(".memFreeLine")   // change the line
            .duration(750)
            .attr("d", memFree(data));
        chart2.select(".memUsedLine")   // change the line
            .duration(750)
            .attr("d", memUsed(data));
        chart2.select(".x.axis") // change the x axis
            .duration(750)
            .call(xAxis);
        chart2.select(".y.axis") // change the y axis
            .duration(750)
            .call(yAxis);

    });
}

</script>
</body>


/*设置CSS*/
正文{font:12px Arial；}
路径{
笔画：黑色；
笔画宽度：2；
填充：无；
}
.轴线路径，
.轴线{
填充：无；
笔画：灰色；
笔画宽度：1；
形状渲染：边缘清晰；
}
//设置画布/图形的尺寸
var margin={顶部：30，右侧：20，底部：30，左侧：50}，
宽度=350-边距.左-边距.右，
高度=250-margin.top-margin.bottom；
//解析日期/时间
var parseTime=d3.time.format（“%d-%m-%Y:%H:%m”）.parse；
//设定范围
var x=d3.time.scale（）.range（[0，width]）；
变量y=d3.scale.linear（）.range（[height，0]）；
//定义轴
var xAxis=d3.svg.axis（）.scale（x）
.方向（“底部”）。刻度（5）；
var yAxis=d3.svg.axis（）.scale（y）
.方向（“左”）。勾号（5）；
//界定界线
var user=d3.svg.line（）
.x（函数（d）{返回x（d.timestamp）；}）
.y（函数（d）{返回y（d.user）；}）；
var system=d3.svg.line（）
.x（函数（d）{返回x（d.timestamp）；}）
.y（函数（d）{返回y（d.system）；}）；
var memFree=d3.svg.line（）
.x（函数（d）{返回x（d.timestamp）；}）
.y（函数（d）{返回y（d.memFree）；}）；
var memUsed=d3.svg.line（）
.x（函数（d）{返回x（d.timestamp）；}）
.y（函数（d）{返回y（d.memUsed）；}）；
//添加svg画布
var chart1=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
var chart2=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
//获取数据
d3.csv（“data.csv”，函数（错误，数据）{
data.forEach（函数（d）{
d、 时间戳=解析时间（d.时间戳）；
d、 user=+d.user；
d、 系统=+d系统；
d、 memFree=+d.memFree；
d、 memUsed=+d.memUsed；
});
var min=d3.min（数据，函数（d）{return Math.min（d.user，d.system）；}）；
x、 域（d3.extent（数据，函数（d）{返回d.timestamp；}））；
y、 域（[min，d3.max（数据，函数（d）{return Math.max（d.user，d.system）；}）]；
图表1.附加（“路径”）
.数据（[数据]）
.attr（“类”、“用户行”）
.style（“笔划”、“绿色”）
.attr（“d”，用户（数据））；
图表1.附加（“路径”）
.数据（[数据]）
.attr（“类”、“系统线”）
.style（“笔划”、“蓝色”）
.attr（“d”，系统（数据））；
//添加X轴
图1.附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
图1.附加（“g”）
.呼叫（yAxis）；
图表1.附加（“文本”）
.attr（“转换”、“转换”（+（宽度/4）+）”，“+y（数据[0]。用户）+”）
.attr（“文本锚定”、“开始”）
.style（“填充”、“绿色”）
.text（“%user”）；
图表1.附加（“文本”）
.attr（“转换”、“转换”（+（宽度/5）+）”，“+y（数据[0].system）+”）
.attr（“文本锚定”、“开始”）
.style（“填充”、“蓝色”）
.text（“%系统”）；
});
d3.csv（“data.csv”，函数（错误，数据）{
data.forEach（函数（d）{
d、 时间戳=解析时间（d.时间戳）；
d、 user=+d.user；
d、 系统=+d系统；
d、 memFree=+d.memFree；
d、 memUsed=+d.memUsed；
});
//缩放数据的范围
var min=d3.min（数据，函数（d）{return Math.min（d.memFree，d.memUsed）；}）；
x、 域（d3.extent（数据，函数（d）{返回d.timestamp；}））；
y、 域（[min，d3.max（数据，函数（d）{return Math.max（d.memFree，d.memUsed）；}）]；
图表2.附加（“路径”）
.数据（[数据]）
.attr（“类”、“memFreeLine”）
.style（“笔划”、“绿色”）
.attr（“d”，memFree（数据））；
图表2.附加（“路径”）
.数据（[数据]）
.attr（“类”、“memUsedLine”）
.style（“笔划”、“蓝色”）
.attr（“d”，memUsed（data））；
//添加X轴
图2.附加（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
//添加Y轴
图2.附加（“g”）
.呼叫（yAxis）；
图表2.附加（“文本”）
.attr（“转换”、“转换”（+（宽度/4）+）、“+y（数据[0].memFree）+”）
.attr（“文本锚定”、“开始”）
.style（“填充”、“绿色”）
.文本（“memFree”）；
图表2.附加（“文本”）
.attr（“转换”、“转换”（+（宽度/2）+）”，“+y（数据[0].memUsed）+”）
.attr（“文本锚定”、“开始”）
.style（“填充”、“蓝色”）
.文本（“memuse”）；
});
setInterval（函数（）{
updateChart1（）；
updateChart2（）；
}, 5000); 
//**更新数据部分（从onclick调用）
函数updateChart1（）{
//再次获取数据
d3.csv（“data.csv”，函数（错误，数据）{
data.forEach（函数（d）{
d、 时间戳=解析时间（d.时间戳）；
d、 user=+d.user；
d、 系统=+d系统；
d、 memFree=+d.memFree；
d、 memUsed=+d.memUsed；
});
var min=d3.min（数据，函数（d）{return Math.min（d.user，d.system）；}）；
x、 域（d3.extent（数据，函数（d）{返回d.timestamp；}））；
y、 域（[min，d3.max（数据，函数（d）{return Math.max（d.user，d.system）；}）]；
//选择要应用更改的节
var chart1=d3.select（“svg”）.transition（）；
//做出改变
图表1.se

chart1.select(".line")//class here is "line"
        .duration(750)
        .attr("d", user(data));
chart1.select(".line")//class here is "line" again!
        .duration(750)
        .attr("d", system(data));



chart1.append("path")
    .data([data])
    .attr("class", "userLine")//specific class
    .style("stroke", "green")
    .attr("d", user(data));

chart1.append("path")
    .data([data])
    .attr("class", "systemLine")//specific class
    .style("stroke", "blue")
    .attr("d", system(data));



chart1.select(".userLine")//selecting different classes...  
        .duration(750)
        .attr("d", user(data));
chart1.select(".systemLine")//selecting different classes...  
        .duration(750)
        .attr("d", system(data));