D3.js 实时模型图示例 - 鼠标移动监测

D3.js Timeline Graph

d3, realtime

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3429
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

HTML

<div ng-app="timescaleApp">
  <div class="container" ng-controller="MainCtrl" ng-mousemove="mousemoved($event)" style="border: 1px solid black;">
    <p>Your mouse movement for the past 30 seconds:</p>
    <svg class="graph">
      <defs>
        <clipPath id="clip">
          <rect></rect>
        </clipPath>
      </defs>
    </svg>
  </div>
</div>

var totalMovement = 0;
    var margin = {
      left: 50,
      top: 10,
      right: 50,
      bottom: 10
    };
    var width = 900 - margin.left;
    var height = 300 - margin.top - margin.bottom;
    var timeBetweenUpdates = 500; // if this value is too low, too much processing power will be used and the movement will be jerky
    var transitionDuration = 480; // needs to be slightly slower then timeBetweenUpdates so that it has time to process a new value
    var secs = 60; // in seconds
    var dataPoints = secs / (timeBetweenUpdates / 1000);

var data = [];

$scope.mousemoved = function(e) {
      totalMovement += e.movementX + e.movementY;
    };

setInterval(function() {
      data.push({
        time: new Date(),
        value: totalMovement
      });
      totalMovement = 0;

if (data.length > dataPoints) {
        data.shift();
      }

update();

}, timeBetweenUpdates);

var translate = function(x, y) {
      return 'translate(' + x + ', ' + y + ')';
    };

var x = d3.time.scale()
      .range([0, width]);
    var y = d3.scale.linear()
      .domain([-200, 200])
      .range([height, 0]);

var svg = d3.select('.graph')
      .attr('width', width + margin.left + margin.right)
      .attr('height', height + margin.top + margin.bottom)
      .append('g')
      .attr('transform', translate(margin.left, margin.top));

var clip = d3.select('.graph #clip rect')
      .attr('width', width - (width / dataPoints * 2))
      .attr('height', height)
      .attr('transform', translate(width / dataPoints, 0));

svg.append('g')
      .attr('clip-path', 'url(#clip)')
      .append('path')
      .attr('class', 'line');

var xAxis = d3.svg.axis().scale(x).orient('bottom');
    var yAxis = d3.svg.axis().scale(y).ticks(5).orient('left');

svg.append('g')
      .attr('class', 'x axis')
      .attr('transform', translate(0, y(0)))
      .call(xAxis);

svg.append('g')
      .attr('class', 'y axis')
      .call(yAxis);

svg.append('g')
      .attr('class', 'y axis')
      .attr('transform', translate(width, 0))
      .call(yAxis.orient('right'));

function update() {
      var now = new Date();
      var beginningOfWindow = new Date(now.valueOf() - (secs * 1000));

x.domain([beginningOfWindow.valueOf(), now.valueOf()]);
      //y.domain(d3.extent(data, function(d) { return d.value; }));

var line = d3.svg.line()
        .x(function(d) {
          return x(d.time);
        })
        .y(function(d) {
          return y(d.value);
        })
        .interpolate('cardinal');

svg.select('path')
        .datum(data)
        .attr('d', line)
        .attr('transform', null)
        .transition().duration(transitionDuration).ease('linear')
        .attr('transform', translate(-(width / dataPoints), 0));

svg.select('.x.axis').transition().duration(transitionDuration).ease('linear').call(xAxis);
    }
  });
</script>

D3.js Timeline Graph

d3, realtime

编辑器支持Emmet

快捷键

D3.js Timeline Graph

d3, realtime

HTML5 D3.js 树形结构动画示范（可绘制脑图）

D3.js 柱形图代码示例

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：