Utilisation de D3js avec jquery et ajax

Bonjour,
Je travaille sur un projet consistant à réaliser une visualisation de données avec la librairie javascript 3Djs. Je dois représenter des données (en pie chart => camembert) en format json issues d'une requete ajax. Jusque là tout va plus ou moins bien. Ensuite, je voudrais pouvoir cliquer sur une tranche du pie chart et updater la page html avec un (ou plusieurs) pie chart créer avec de nouvelles données. Des idées de conception et des solutions (exemple de codes) sont les bienvenues...Merci par avance !

Mon code qui me représente deux camemberts et qui gére le click sur les tranches (affiche juste 'test' pour le moment).

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3: Exemple de Pie Chart</title>
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript"></script>
    <style type="text/css">
 
    text {
        font-family: sans-serif;
        font-size: 12px;
        fill: white;
    }
 
    body {
      text-align: center;
    }
 
    </style>
  </head>
  <body>
    <script>
 
    var data = [
      [11975,  5871, 8916, 2868],
      [ 1951, 10048, 2060, 6171]
    ];
 
    var m = 10,
        r = 100,
        x = r+m,
        y = r+m,
        z = d3.scale.category10();
 
 
    var arc = d3.svg.arc()
                  .innerRadius(0)
                  .outerRadius(r);
 
    var svg = d3.select("body").selectAll("svg")
        .data(data)
      .enter().append("svg")
        .attr("width", (r + m) * 2)
        .attr("height", (r + m) * 2)
      .append("g")
        .attr("transform", "translate(" + x + "," + y + ")");
 
 
    svg.selectAll("path")
        .data(d3.layout.pie())
      .enter().append("path")
        .attr("d", arc)
        .on("click", function(d){
            alert('test')
        })
        .attr("fill", function(d, i) { return z(i); });
 
  </script>
</body>
</html>