D3和双向数据绑定

Question

我对使用data driven documents库和双向AJAX数据绑定的当前最佳实践和解决方案感兴趣。更具体地说，我想知道如何d3最好与支持双向数据绑定的lib集成，例如Angular或Knockout。

出现的明显冲​​突源于d3和AJAX库都将数据插入DOM，这基本上意味着必须包装另一个。< / p>

Answer 1

关于DOM的数据

您担心插入DOM的数据。这是添加的一些属性：

• D3js：__data__，__onmouseover.force，__onmouseout.force，__onmousedown.drag，__ontouchstart.drag，__onmousedown
• AngularJS：value，type，version，align，ng339

因此没有任何合并，也没有必要将一个包装成另一个。您可以使用Object.keys(SOME_DOM_ELEMENT);和Object.keys(SOME_DOM_ELEMENT.__proto__);

对此进行测试

关于实施

纯javascript

这是您向D3js分配数据的方式：

d3selector.data( myNameSpace.myDataObject );

这是我使用watch https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch

的数据绑定方法

d3selector
myNameSpace.watch('myDataObject', function (id, oldval, newval) {
    d3selector.data( newval );
    return newval;
});

这样，每次更改myNameSpace.myDataObject时，D3js使用的数据也会更新。但这只适用于Firefox。

AngularJS

这个问题Angular + d3.js: Data binding with SVG text attr?中的答案解释了如何使用$ watch进行操作。

类似于Firefox手表：

directive('myDirective', function ( /* dependencies */ ) {

    // Imagine your $scope has myDataObject
    $scope.$watch('myDataObject', function (newVal, oldVal) {
        d3selector.data(newVal);
    });

}

现在，每当您更改myDataObject中的$scope时，D3js的数据也会更新。

更多信息

以下是使用polymer的双向数据绑定的示例：http://bl.ocks.org/psealock/a4f1e24535f0353d91ea您可以在此处测试：http://bl.ocks.org/psealock/raw/a4f1e24535f0353d91ea/

正如您在refreshChart中所看到的，绑定并未真正被使用。相反，在数据更改时触发的事件中，D3js会加载新数据：

this.g.data(this.pie(this.data));

D3js不准备监听数据的更改，除非您使用data方法。这就是为什么已渲染的数据不会改变的原因。

如果将来实施数据绑定，我想selection会有一个新方法：

  

selection.update - 返回更新元素的占位符。

类似于当前的enter和exit：

  

selection.enter - 返回缺少元素的占位符。

     

selection.exit - 返回不再需要的元素。

无需创建刷新功能。