Как привязать сгенерированные d3 HTML-элементы к области видимости?

Question

Как привязать сгенерированные d3 HTML-элементы к области видимости?

0

Я генерирую узлы в 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 с областью? Я не хочу перерисовывать узлы всякий раз, когда изменяется область действия. Я просто хочу, чтобы их классы были привязаны к области.

Philip Geske 29 июнь 2015, в 22:12

Источник

Теги:

javascript

angularjs

d3.js

1 ответ

Ещё вопросы

Andy Lewis · Answer 1 · 2015-06-30T12-28-00.000Z

Добавьте часы вокруг области. Выбрали в своей функции ссылок, затем оберните свой код чертежа d3 в функцию и вызовите этот метод, когда часы срабатывают.

(Кстати, скрипку всегда легче справляться, задавая вопросы)

Возможно, вы захотите также прочитать общий шаблон обновления для 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();
    }