clipPath с d3.js и угловой не работает

У меня есть график, построенный с d3.js, встроенный в мой проект AngularJS, и у меня есть проблема с сохранением линий внутри области диаграммы при увеличении (с помощью d3.behavior.zoom) , У меня нет базового тега в моем заголовке. Соответствующая часть моего кода выглядит следующим образом:clipPath с d3.js и угловой не работает

this.svg = d3.select(elem).append("svg") 
     .attr('class', 'plot') 
     .attr('width', this.width + this.margin.left + this.margin.right) 
     .attr('height', this.height + this.margin.top + this.margin.bottom) 
     .call(responsivefy); 

    this.svg.append('defs').append('svg:clipPath') 
     .attr('id', 'clip') 
    .append('svg:rect') 
    .attr('width', this.width) 
    .attr('height', this.height) 
    .attr('x', this.margin.left) 
    .attr('y', this.margin.top); 

    this.svg = this.svg.append('g') 
    .attr('transform', 'translate(' + this.margin.left + ',' + this.margin.top + ')'); 

    this.curves_layer = this.svg.append('g'); 
    var paths = this.curves_layer.selectAll('.line').data(data.series); 
    paths.transition() 
    .attr('d', function(d) { return line(d.values); }).attr('clip-path', 'url(#clip)') 
    .attr('stroke', function(d) { return that.color(d.name)}); 
    paths.enter().append('path').attr('class', 'line') 
    .attr('d', function(d) { return line(d.values); }).attr('clip-path', 'url(#clip)') 
    .attr('stroke', function(d) { return that.color(d.name)}); 
    paths.exit().remove();

Я попытался применить атрибут клипа пути к this.curves_layer группы, я пытался поставить абсолютный URL вместо того, чтобы просто #clip. Ничего не работает. Когда я увеличиваю масштаб, пути переполняют область диаграммы.

Связанные угловая директива выглядит следующим образом:

plots.directive('plot', ['$timeout', '$compile', 
    function($timeout, $compile) { 
     return { 
     restrict: 'E', 
     scope: { 
      chart: '=', 
      data : '=' 
     }, 
     link: function(scope, elem, attrs) { 
      scope.$watch('chart', function(newVal, oldVal) { 
       if (!newVal) return; 

       // Clear the directive 
       elem.children().remove() 
       scope.plot = null; 
      }); 

      scope.$watch('data', function(newVal, oldVal) { 
       if (!newVal) return; 
       if (!scope.plot) { 
        scope.plot = new Plot(scope.data, elem[0]); 
       } else { 
        scope.plot.update(scope.data); 
       } 

       $compile(elem)(scope); 

      }, true); 
     } 
     }; 
    }]);

источник

2015-07-17 Antoine Genton

D3.js с jQuery, как правило, менее проблематичен и проще, чем использование D3.js в AngularJS при использовании обновлений D3. Чтобы кто-то помог устранить неполадки, вам необходимо предоставить свой угловой код, который взаимодействует с D3. Если вы просто разместите DOM-элементы DOM в контексте Angular ng-app, обновления перестанут работать. [Как обновить D3 в Angular] (http://www.ng-newsletter.com/posts/d3-on-angular.html) – subsci

Я добавил код угловой директивы. Но обновление работает нормально. Когда я увеличиваю масштаб, он масштабируется. Проблема в том, что кривые, которые я рисую, или полосы в гистограммах переполняют область диаграммы. Например, у меня будут бары с левой стороны оси y. И наличие клипа, чтобы избежать этого, кажется, абсолютно не влияет. –

Я был в состоянии решить мою проблему с помощью svg тегов, сбросив clipPath подход. Вместо того, чтобы:

this.curves_layer = this.svg.append('g');

Я использовал:

this.curves_layer = this.svg.append('svg') 
    .attr('height', this.height) 
    .attr('width', this.width);

я не знаю, что это было возможно иметь несколько svg тегов вложенных. По-видимому, это и все за пределами заданного svg обрезано.

источник

2015-07-21 18:13:23

clipPath с d3.js и угловой не работает

ответ

Смежные вопросы