2016-04-25 52 views

回答

1

可以包D3處理成Angular2組分,如下所述:

@Component({ 
    selector: 'app' 
    template: ` 
    <svg> 
    </svg> 
    ` 
}) 
export class App { 
    constructor(private elementRef:ElementRef) { 
    } 

    ngOnInit() { 
    var width = 960, 
     height = 500, 
     radius = Math.min(width, height)/2; 

    var color = d3.scale.ordinal() 
     .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]); 

    var arc = d3.svg.arc() 
     .outerRadius(radius - 10) 
     .innerRadius(0); 

    var labelArc = d3.svg.arc() 
     .outerRadius(radius - 40) 
     .innerRadius(radius - 40); 

    var pie = d3.layout.pie() 
     .sort(null) 
     .value(function(d) { return d.population; }); 

    var svg = d3.select(this.elementRef.nativeElement).select('svg') 
     .attr("width", width) 
     .attr("height", height) 
     .append("g") 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")"); 

    d3.csv("data.csv", type, function(error, data) { 
    if (error) throw error; 

    var g = svg.selectAll(".arc") 
     .data(pie(data)) 
     .enter().append("g") 
     .attr("class", "arc"); 

    g.append("path") 
     .attr("d", arc) 
     .style("fill", function(d) { return color(d.data.age); }); 

    g.append("text") 
     .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; }) 
     .attr("dy", ".35em") 
     .text(function(d) { return d.data.age; }); 
    }); 

    function type(d) { 
     d.population = +d.population; 
     return d; 
    } 
    } 
} 

見本plunkr:https://plnkr.co/edit/rXvxpa7uguN00yzvwc72?p=preview基於樣品https://bl.ocks.org/mbostock/3887235

-1

有許多很棒的圖表庫。它們適用於任何事情,而不僅僅是角度。嘗試任一這些

fusion charts

Highcharts

+0

OP明確詢問d3。你建議把尾巴搖擺成一隻貓。 – drewmoore

+0

我對fusioncharts很熟悉,但據我所知他們沒有angular 2的插件。我正在尋找一個使用angular2 beta 15的工作示例。 – Salander

+0

@drewmoore ......鑑於SO上永無止境的可怕語法,因爲我從來沒有聽說過那個圖書館,我以爲他只是在問三維餅圖。這兩個鏈接都會幫助他。反對票沒有必要。 – dinotom