Question

我正在编写一个基于d3.js的实时图表指令。结构如下所示：

myDirective.js ：

app.directive('myDirective', function(socketio) {

  return {
    restrict: 'EA',
    templateUrl: '../../views/partials/chart.html',
    controller: DataController,

    link: function(scope, elem, attrs, ctrl) {

      scope.Watch = scope.$watch(function() {
        return ctrl.data;
      }, function(newVal) {
        // d3 code part
      });

      socketio.on(event, function(newdata) {
        ctrl.data.push(newdata);
        // redraw chart
      });
    }
  };
});

在上面的d3代码部分中，我引用了 http://bl.ocks.org/gniemetz/4618602 。主要代码几乎相同，图表显示良好。

现在我想使用socket.io通过代码

更新图表

socketio.on(event, function(newdata) {
  ctrl.data.push(newdata);
  // redraw chart
});

但不知道如何使用更新的'ctrl.data'有效地重绘图表。我知道在Morris.js中，我们可以通过'.setData（ctrl.data）'方法完成此操作，但不知道如何在d3中更新。有什么想法吗？

ps：我试图将上面的d3代码复制/粘贴到这个地方，但总有一个错误说：“TypeError：t.slice不是函数”

谢谢，

Answer 1

快速而肮脏的方式：每次更新时，请清空update并重新绘制整个图表。

更优雅的方式：编写自己的Update()函数来添加新数据。这是迄今为止最具视觉吸引力的方式，因为图形实际上是动画的。 D3很适合这种类型的东西，所以它绝不是它的一部分功能。这会花费更长的时间，但通常会提供更令人愉悦的体验，如D3＆＃39}中的某些图表所示（示例：http://square.github.io/crossfilter/，http://bl.ocks.org/NPashaP/96447623ef4d342ee09b）这里＆＃39; s我将如何使用您想要的图表来做到这一点：

保持代码相同
添加一个名为socketio.on(...)的更新功能，在您评论的// redraw chart部分调用Update()
Update()将重新定义所有D3变量并为更改设置动画

Update通过执行从头开始创建图表所使用的步骤的子集，基本上可以执行上述项目符号。这里概述了它的作用：重新缩放x和y轴，以图形方式更新轴，将原始点和线转换为新轴上的新位置，添加新点，并添加任何轴它可能需要完成图表

我正在为一个jsFiddle工作，有一个工作Update来演示上面的内容，希望在你的代码中实现它很简单。我完成后会编辑这篇文章，但我想给你快速的＃34;回答我的工作，同时试图帮助你。如果你想同时阅读，请查看 http://blog.visual.ly/creating-animations-and-transitions-with-d3-js/

<强>更新

https://jsfiddle.net/npzjLng9/2/。我拿了你提供的例子，不得不修改要加载的数据是本地的，而不是文本文件;但是，它的格式相同，而且可读性的条目也少得多。除此之外，我没有对示例进行任何更改。这是我添加的内容：向下滚动并找到最后一个函数socket.io。这是更新和动画发生的地方。注意函数的流程：

＆＃34;更新＆＃34;数据好像您的socket.io是收到它的人，然后将其附加到数据集中。
重新定义轴
重新定义点和路径
指定转换持续时间（随意使用适合您的任何数字）
实际更新并动画更改情节

我添加了一个按钮来模拟data.push接收事件。

对于您的应用，请忽略console.log功能中的Update()和ctrl.data，我认为您需要的只是 - 除了指向数据当然，您的Update()数组会在socketio.on(...)中运行~/django-project/mysite $ python3 manage.py runserver Performing system checks... System check identified no issues (0 silenced). July 30, 2015 - 17:30:01 Django version 1.8.3, using settings 'mysite.settings' Starting development server at http://127.0.0.1:8000/ Quit the server with CONTROL-C. Unhandled exception in thread started by <function check_errors.<locals>.wrapper at 0x7fe3e65b79d8> Traceback (most recent call last): File "/usr/local/lib/python3.4/dist-packages/django/utils/autoreload.py", line 225, in wrapper fn(*args, **kwargs) File "/usr/local/lib/python3.4/dist-packages/django/core/management/commands/runserver.py", line 134, in inner_run translation.activate(settings.LANGUAGE_CODE) File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/__init__.py", line 146, in activate return _trans.activate(language) File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/trans_real.py", line 222, in activate _active.value = translation(language) File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/trans_real.py", line 206, in translation _translations[language] = DjangoTranslation(language) File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/trans_real.py", line 115, in __init__ self._init_translation_catalog() File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/trans_real.py", line 153, in _init_translation_catalog translation = self._new_gnu_trans(localedir, use_null_fallback) File "/usr/local/lib/python3.4/dist-packages/django/utils/translation/trans_real.py", line 136, in _new_gnu_trans fallback=use_null_fallback) File "/usr/lib/python3.4/gettext.py", line 416, in translation raise OSError(ENOENT, 'No translation file found for domain', domain) FileNotFoundError: [Errno 2] No translation file found for domain: 'django'函数。

相同的基本大纲适用于动画/更新大多数图表。

我希望这可以帮到你！

通过socket.io

1 个答案: