Question

我在角度指令中生成d3中的节点，我希望节点的类动态绑定到我的范围中的元素。以下是我想要做的概述：

app.directive('myDirective',function(){
    return {
        restrict: 'EA',
        link: function(scope,element,attrs){
            var node = d3.selectAll('.node')
                         .data(nodes)
                         .enter().append('circle')
                         .classed('selected',function(d){return d.id=scope.selected.id})
        }
    }
})

这是伪代码，但基本上d3正在生成这些节点/圆，我希望这些圆的类依赖于范围内元素的值。因此，如果在任何时候我修改scope.selected.id，它应该影响节点的类。但是，使用上面显示的方法不起作用。我尝试修改scope.selected.id，但节点的类不受影响。

如何将d3生成的元素动态绑定到范围？每当修改范围时，我都不想重绘节点。我只是想让他们的类绑定到范围。

Answer 1

在链接函数中的scope.selected周围添加一个监视，然后将d3绘图代码包装在函数中，并在监视触发时调用该方法。

（BTW在提问时总是更容易处理）

您可能还想阅读D3的常规更新模式http://bl.ocks.org/mbostock/3808218

如果您掌握D3文档生命周期的各个阶段，它将使生活更轻松，更新更快。

    function update(data) {

      // DATA JOIN
      // Join new data with old elements, if any.
      var text = svg.selectAll("text")
          .data(data);

      // UPDATE
      // Update old elements as needed.
      text.attr("class", "update");

      // ENTER
      // Create new elements as needed.
      text.enter().append("text")
          .attr("class", "enter")
          .attr("x", function(d, i) { return i * 32; })
          .attr("dy", ".35em");

      // ENTER + UPDATE
      // Appending to the enter selection expands the update selection to include
      // entering elements; so, operations on the update selection after appending to
      // the enter selection will apply to both entering and updating nodes.
      text.text(function(d) { return d; });

      // EXIT
      // Remove old elements as needed.
      text.exit().remove();
    }

如何将d3生成的HTML元素绑定到范围？

1 个答案: