2015-10-05 57 views
6

我正在嘗試整合d3和angular2 alpha.37(從here開始)。我目前遇到的問題是生成的DOM元素不能獲得仿真樣式視圖封裝中使用的屬性,所以我無法設置它們的樣式,而沒有將該元素的視圖封裝設置爲無(或本機,但我寧願使用模擬)。添加主機屬性到生成的DOM元素

我設法以編程提取的元件所需的屬性分量[1]內,然後將其添加到所生成的元素[2],它不工作,但這顯然難以置信哈克:

import {Component, View, Attribute, ElementRef, LifecycleEvent} from 'angular2/angular2'; 

import d3 from 'd3'; 

@Component({ 
    selector: 'bar-graph', 
    properties: [ 'data' ] 
}) 
@View({ 
    template: '<div class="chart"></div>', 
    styles: [`.chart { 
    background: #eee; 
    padding: 3px; 
    } 

    div.bar { 
    width: 0; 
    transition: all 1s ease-out; 
    -moz-transition: all 1s ease-out; 
    -webkit-transition: all 1s ease-out; 
    } 

    div.bar { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 5px; 
    color: white; 
    box-shadow: 2px 2px 2px #666; 
    }`] 
}) 
export class BarGraph implements LifecycleEvent.OnChanges { 
    data: Array<number>; 
    divs: any; 
    constructor(elementRef: ElementRef, @Attribute('width') width: string, @Attribute('height') height: string) { 


    var el:any = elementRef.nativeElement; 
    var graph:any = d3.select(el); 

    this.hostAttr = graph[0][0].children[0].attributes[1].name; //hack here [1] 

    this.divs = graph. 
     select('div.chart'). 
     style({ 
     'width': width + 'px', 
     'height': height + 'px', 
     }). 
     selectAll('div.bar'); 

    } 

    render(newValue) { 
    if (!newValue) return; 

    this.divs.data(newValue) 
     .enter().append('div') 
      .classed('bar', true) 
      .attr(this.hostAttr, true) //add the attribute here [2] 
      .style('width', d => d + '%') 
      .text(d => d + '%'); 

    } 

    onChanges() { 
    this.render(this.data); 
    } 

} 

是否有推薦的方式來處理這類事情(或者我應該停止修改Angular2之外的DOM)?

+1

如果您想要一個答案,您至少必須升級到beta.0。 –

+0

@EricMartinez在beta.7上有同樣的問題。 –

回答

1

不是一個完整的答案(還),但也許一些有用的信息,可以找到一個解決方案幫助:

  • 問題仍然存在beta.8。將視圖封裝設置爲None並使用全局樣式是我可以開始工作的唯一解決方案。使用Native似乎沒有任何元素被添加到DOM中,但我不得不做更多的測試來找出原因。
  • 由OP提出的黑客工程,可以重構成合理的解決方案,至少在我看來。
  • d3.js的特定情況下,當引入由庫內部創建的元素時,事情變得更加棘手,例如,通過d3.svg命名空間中的方法。毫無疑問,可以找到解決方法。
  • 但我認爲這個問題比d3大。有很多圖書館都有自己的DOM生成/操作機制,並且認爲其中的一部分將在某些應用程序中集成到某個或其他應用程序中並不現實。從這個意義上說,這個問題似乎還沒有出現(或者我的Google-fu本週特別弱)令人驚訝。

在解決方案方面,這些是我目前考慮的情況下,這兩種方法沒有一個人想出了更好的東西:

  1. 實施某種形式的後處理器,可引導部分DOM樹並設置樣式範圍屬性。也許作爲一個指令?
  2. 嘗試裝飾渲染器,如暗示here