Question

我正在寻找一种方法来渲染带有angular2 beta 15的d3pie图表。如果有人能指出我一个很好的例子，它会有很大的帮助！谢谢！

Answer 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;
    }
  }
}

根据示例https://plnkr.co/edit/rXvxpa7uguN00yzvwc72?p=preview查看此plunkr：https://bl.ocks.org/mbostock/3887235。

Answer 2

有很多很棒的图表库。它们适用于所有东西，而不仅仅是角度。尝试其中任何一个

fusion charts

Highcharts

使用angular2 beta 15渲染d3pie图表

2 个答案: