D3更新图

Question

在这个问题上确实停留了好几天。 我正在尝试更新d3图形，以显示在计算器上运行一个函数需要多长时间。 利用获得的信息，我将显示花费的时间并将其显示在我先前绘制的图形上。 现在我的问题是我无法更新图表。

图形代码：

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

更新函数和数组更新的代码：

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

}

请告知我如何使它工作。 我现在读了很多指南，但是

Answer 1

几件事情：

1.）在更新函数中，行生成器函数是line not valueline 。

2.）通过查看访问器函数，我认为您的意思不是dataone.push(clickss-0.5,clickss); 而是dataone.push([clickss-0.5,clickss]); 。 您需要一个数组数组。

另外，您不需要将数据dataone数组映射到另一个结构。 只需更改您的访问器：

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

这是您的代码，可以进行一些清理：

 <!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更新图

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-01 14:11:08

D3更新图

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-01 14:11:08

解决方案1
0 已采纳 2015-11-01 14:11:08