d3.jsのグラフを自動的に更新

このtutorialに基づいて、2つのメトリックをそれぞれ持つ2つのグラフを作成しました。 5秒ごとに、最初のグラフにcpu％userとcpu％システムが表示され、2番目のグラフで使用されているメモリ空きメモリがcsvファイルから読み込まれます。d3.jsのグラフを自動的に更新

問題は、最初のグラフの最初の行だけを更新することです。 cpu％userを削除すると、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>

出典

2016-12-07 jimakos17

私が何についてほとんど確信している：

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));

そして、個別に各1を更新問題はありますが、回答を書く前に**あなたの**コードを貼り付けることができますか？ –

私の質問が更新されました@GerardoFurtado – jimakos17

は問題です：

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));

参照してください：あなたのupdateChart機能の両方の内側に同じ要素を選択していますか？ユーザとシステムの両方のデータに対して同じクラス（.line）を選択しています。

ソリューション：最初の絵で

、設定の異なるクラス：

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

出典

2016-12-07 02:14:14

私はuserLine、systemLine、memFreeLine、memUsedLineに変更しましたが、今は何も更新しません。最初のグラフの最初の行さえありません。 – jimakos17

私が見ることができるもう一つの間違いは、この行です。あなたは削除すべきです： 'var chart1 = d3.select（" svg "）。transition（）;'あなたが持っていた問題ははっきりしていました。この時点では、データを使って作業しているプランカーやフィドルを作成しない限り、私はもう助けません。 –

新しいクラスでコードを更新しました。私は行を削除したときvar chart1 = d3.select（ "svg"）。transition（）; Uncaught TypeError：chart1.select（...）。durationは関数ではありません。ありがとう、助けてください。Gerardo – jimakos17

d3.jsのグラフを自動的に更新

答えて

関連する問題