D3 Update Graph

Question

really stucked on this issue for days. I am trying to update my d3 graph to show how long it takes to run a function on a calculator. With the info I get, I will show the time taken and display it on the graph that I previously drew. My issue here now is that I just can't get the graph to update.

Codes for the graph:

var margin = {top: 20, right: 20, bottom: 30, left: 50},
        width = 400 - margin.left - margin.right,
        height = 300 - margin.top - margin.bottom;


    var x = d3.scale.linear()
        .range([0, width])

    var y = d3.scale.linear()
        .range([height, 0]);

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom");

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

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

    var svg = 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 data = dataone.map(function(d) {
          return {
             date:d[0],
             close: d[1]
          };

      });

  console.log(data);


  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Price ($)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);

Code for update function and update of array:

 function updateArray(){
    dataone.push(clickss-0.5,clickss);
    updateData();
}
function updateData() {

var data = dataone.map(function(d) {
      return {
         date:d[0],
         close: d[1]
      };
    }); 
    // Scale the range of the data again 
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return d.close; })]);

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

// Make the changes
    svg.select(".line")   // change the line
        .duration(750)
        .attr("d", valueline(data));
    svg.select(".x.axis") // change the x axis
        .duration(750)
        .call(xAxis);
    svg.select(".y.axis") // change the y axis
        .duration(750)
        .call(yAxis);

}

Please advise on how I can get this to work. I read quite a few guides now but

Answer 1

Couple things:

1.) In your update function, your line generator function is line not valueline .

2.) By looking at your accessor functions, I don't think you meant dataone.push(clickss-0.5,clickss); but rather dataone.push([clickss-0.5,clickss]); . You need an array of arrays.

In addition, you don't need to map your dataone array to another structure. Just change your accessors:

x.domain(d3.extent(data, function(d) {
  return d[0];
}));
y.domain(d3.extent(data, function(d) {
  return d[1];
}));
...
var line = d3.svg.line()
  .x(function(d) {
    return x(d[0]);
  })
  .y(function(d) {
    return y(d[1]);
  });

Here's your code working and cleaned up a bit:

 <!DOCTYPE html> <html> <head> <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script> </head> <body> <script> var dataone = []; for (var i = 0; i < 10; i++){ dataone.push([i,Math.random()]); } var margin = { top: 20, right: 20, bottom: 30, left: 50 }, width = 400 - margin.left - margin.right, height = 300 - margin.top - margin.bottom; var x = d3.scale.linear() .range([0, width]) var y = d3.scale.linear() .range([height, 0]); var xAxis = d3.svg.axis() .scale(x) .orient("bottom"); var yAxis = d3.svg.axis() .scale(y) .orient("left"); var line = d3.svg.line() .x(function(d) { return x(d[0]); }) .y(function(d) { return y(d[1]); }); var svg = 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 + ")"); // Scale the range of the data again x.domain(d3.extent(dataone, function(d) { return d[0]; })); y.domain([0, d3.max(dataone, function(d) { return d[1]; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("Price ($)"); svg.append("path") .datum(dataone) .attr("class", "line") .attr("d", line) .style("fill","none") .style("stroke","steelblue"); function updateData() { // Scale the range of the data again x.domain(d3.extent(dataone, function(d) { return d[0]; })); y.domain([0, d3.max(dataone, function(d) { return d[1]; })]); // Select the section we want to apply our changes to var svg = d3.select("body").transition(); // Make the changes svg.select(".line") // change the line .duration(750) .attr("d", line(dataone)); svg.select(".x.axis") // change the x axis .duration(750) .call(xAxis); svg.select(".y.axis") // change the y axis .duration(750) .call(yAxis); } setInterval(function(){ for (var i = 0; i < 5; i++){ dataone.push([dataone.length + i, Math.random()]); } updateData(); },1000); </script> </body> </html>

D3 Update Graph

Question

1 answers

solution1
0 ACCPTED 2015-11-01 14:11:08

D3 Update Graph

Question

1 answers

solution1 0 ACCPTED 2015-11-01 14:11:08

solution1
0 ACCPTED 2015-11-01 14:11:08