Method render

src/Pie.js:63–146

()

  }

  render() {
    if (this.title) {
      addLabels.title(this.svgEl, this.title, this.options.strokeColor);
    }

    const tooltip = new Tooltip({
      parent: this.svgEl,
      title: 'tooltip',
      items: [{ color: 'red', text: 'weweyang: 12' }, { color: 'blue', text: 'timqian: 13' }],
      position: { x: 30, y: 30, type: config.positionType.upRight },
      unxkcdify: this.options.unxkcdify,
      strokeColor: this.options.strokeColor,
      backgroundColor: this.options.backgroundColor,
    });

    const radius = Math.min(this.width, this.height) / 2 - margin;

    const thePie = pie();

    const dataReady = thePie(this.data.datasets[0].data);

    const theArc = arc()
      .innerRadius(radius
        * (this.options.innerRadius === undefined ? 0.5 : this.options.innerRadius))
      .outerRadius(radius);

    this.chart.selectAll('.xkcd-chart-arc')
      .data(dataReady)
      .enter()
      .append('path')
      .attr('class', '.xkcd-chart-arc')
      .attr('d', theArc)
      .attr('fill', 'none')
      .attr('stroke', this.options.strokeColor)
      .attr('stroke-width', 2)
      .attr('fill', (d, i) => this.options.dataColors[i])
      .attr('filter', this.filter)
      // .attr("fill-opacity", 0.6)
      .on('mouseover', (d, i, nodes) => {
        select(nodes[i]).attr('fill-opacity', 0.6);
        tooltip.show();
      })
      .on('mouseout', (d, i, nodes) => {
        select(nodes[i]).attr('fill-opacity', 1);
        tooltip.hide();
      })
      .on('mousemove', (d, i, nodes) => {
        const tipX = mouse(nodes[i])[0] + (this.width / 2) + 10;
        const tipY = mouse(nodes[i])[1] + (this.height / 2) + 10;

        tooltip.update({
          title: this.data.labels[i],
          items: [{
            color: this.options.dataColors[i],
            text: `${this.data.datasets[0].label || ''}: ${d.data}`,
          }],
          position: {
            x: tipX,