使用 angular2 beta 15 渲染 d3pie 图表

Question

我正在寻找一种使用 angular2 beta 15 呈现 d3pie 图表的方法。如果有人能给我指出一个很好的例子，那将很有帮助！谢谢！

Answer 1

有很多很棒的图表库。它们适用于一切，而不仅仅是 angular。试试这些

Answer 2

您可以将 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 based on the sample https://bl.ocks.org/mbostock/3887235。

使用 angular2 beta 15 渲染 d3pie 图表

Rendering d3pie charts with angular2 beta 15

angular

d3pie.js