D3和双向数据绑定

Question

我对将数据驱动的文档库与双向AJAX数据绑定一起使用的当前最佳实践和解决方案感兴趣。 更具体地说，我想知道d3应该如何与支持双向数据绑定（例如Angular或Knockout）的库最佳集成。

明显的冲突源于d3和AJAX库都将数据插入DOM的事实，这基本上意味着一个必须包装另一个。

Answer 1

关于DOM上的数据

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

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

因此，没有细菌，也不需要将它们包裹在一起。 您可以使用Object.keys(SOME_DOM_ELEMENT);测试Object.keys(SOME_DOM_ELEMENT); 和Object.keys(SOME_DOM_ELEMENT.__proto__);

关于实施

纯JavaScript

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

d3selector.data( myNameSpace.myDataObject );

这是我使用监视的数据绑定方法： https : //developer.mozilla.org/zh-CN/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：使用SVG文本属性绑定数据吗？ 解释了如何使用$ watch进行操作。

与Firefox手表类似：

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

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

}

现在，每次在$scope更改myDataObject时，D3js的数据也将被更新。

更多信息

这是使用聚合物的两种数据绑定示例： http : //bl.ocks.org/psealock/a4f1e24535f0353d91ea您可以在此处进行测试： http : //bl.ocks.org/psealock/raw/a4f1e24535f0353d91ea/

如您在refreshChart中refreshChart ，绑定实际上并没有被使用。 相反，在数据更改时触发的事件上，D3js加载新数据：

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

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

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

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

类似于当前的enter和exit ：

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

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

无需创建刷新功能。