Utilisation de D3js avec jquery et ajax

**hack224** · 01/03/2016, 12h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**NoSmoking** · 05/03/2016, 10h49

Bonjour,

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.

et qu'est ce qui t'en empêche, au lieu de mettre un alert('test') tu fais appel à une fonction qui lancera ta requête Ajax et la création d'un graphe au retour, chargera une autre page...ou que sais je encore.

Utilisation de D3js avec jquery et ajax

Bibliothèques & Frameworks

Discussions similaires

Partager

Partager