D3和双向数据绑定

Question

我对使用具有双向数据绑定的数据驱动文档库的当前最佳实践和解决方案感兴趣AJAX.更具体地说,我想知道d3应该如何与支持双向数据绑定(如Angular或Knockout)的库最好地集成.

产生的明显冲突源于d3和AJAXlib都插入数据的事实DOM,这基本上意味着必须包装另一个.

Answer 1

关于 DOM 上的数据

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

• D3js ：__data__、、、、、、__onmouseover.force​​​__onmouseout.force__onmousedown.drag__ontouchstart.drag__onmousedown
• AngularJS : value,,,,,type​version​alignng339

因此，不会发生碰撞，也无需将一个对象包裹到另一个对象中。您可以使用Object.keys(SOME_DOM_ELEMENT);和测试这个Object.keys(SOME_DOM_ELEMENT.__proto__);

关于实施

纯javascript

这是将数据分配给 D3js 的方式：

d3selector.data( myNameSpace.myDataObject );

这是我使用手表的数据绑定方法： 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.myDataObjectD3js 使用的数据也会更新。但这仅适用于 Firefox。

AngularJS

这个问题有答案Angular + d3.js: Data Binding with SVG text attr? 这解释了如何使用 $watch 来做到这一点。

与 Firefox Watch 类似：

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

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

}

现在每次你改变myDataObjectD3js$scope的数据也会更新。

更多信息

以下是使用聚合物进行双向数据绑定的示例：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 - 返回不再需要的元素。

无需创建刷新函数。