Modification Fonction D3

**thuglife** · 29/05/2015, 12h55

Bonjour,

J'utilise actuellement la bibliothèque d3.v3.min.js pour générer un graph type "scatter plot" lier à un fichier data.txt où ce trouve tout mes points.
Le fichier txt est formater en 4 colonnes avec comme séparateur le ";" :
Nom;Energie;Text;Date

Dans le script, lors du passage de la souris sur un point, les 3 valeurs des 3 premières colonnes apparaissent (Nom;Energie;Text) et disparaissent quand le pointeur de la souris n'est plus sur le point en question.

Je souhaiterais également faire apparaitre la 4ème valeur "Date", mais je ne sais pas du tout comment mis prendre.

Pourriez vous m'aider ?

Voici le script que j'utilise :

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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
<script>
var margin = {top: 5, right: 20, bottom: 40, left: 80},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
 
// setup x
var xValue = function(d) { return d.Text;}, // data -> value
    xScale = d3.scale.linear().range([0, width]), // value -> display
    xMap = function(d) { return xScale(xValue(d));}, // data -> display
    xAxis = d3.svg.axis().scale(xScale).orient("bottom");
 
// setup y
var yValue = function(d) { return d["Energie"];}, // data -> value
    yScale = d3.scale.linear().range([height, 0]), // value -> display
    yMap = function(d) { return yScale(yValue(d));}, // data -> display
    yAxis = d3.svg.axis().scale(yScale).orient("left");
 
// setup fill color
var cValue = function(d) { return d.Nom;},
    color = d3.scale.ordinal().range(["#32CD32", "#FF00FF", "#FFA500", "#1E90FF", "#FFD700", "#ff7f0e","#FF0000"]); //d3.scale.category10();
 
// add the graph canvas to the body of the webpage
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
 
// add the tooltip area to the webpage
var tooltip = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);
 
// load data
d3.csv("data.txt", function(error, data) {
 
  // change string (from CSV) into number format
  data.forEach(function(d) {
    d.Text = +d.Text;
    d["Energie"] = +d["Energie"];
//    console.log(d);
  });
 
  // don't want dots overlapping axis, so add in buffer to data domain
  xScale.domain([d3.min(data, xValue)-1, d3.max(data, xValue)+1]);
  yScale.domain([d3.min(data, yValue)-1, d3.max(data, yValue)+1]);
 
  // x-axis
  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "label")
      .attr("x", width)
      .attr("y", 30)
      .style("text-anchor", "end")
      .text("Temperature Exterieure (Degre C)");
 
  // y-axis
  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("class", "label")
      .attr("transform", "rotate(-90)")
      .attr("y", -75)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Energie (Kwh/Jour)");
 
  // draw dots
  svg.selectAll(".dot")
      .data(data)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", 4)
      .attr("cx", xMap)
      .attr("cy", yMap)
      .style("fill", function(d) { return color(cValue(d));})
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", 100);
          tooltip.html(d["Nom"] + "<br/> (" + xValue(d)
            + ", " + yValue(d) + ")") // je souhaiterais ajouter ici ajouter l'affichage de date du point
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(1000)
               .style("opacity", 0);
      });
 
  // draw legend
  var legend = svg.selectAll(".legend")
      .data(color.domain())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
 
  // draw legend colored rectangles
  legend.append("rect")
      .attr("x", width)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);
 
  // draw legend text
  legend.append("text")
      .attr("x", width - 5)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .style("fill", color)
      .text(function(d) { return d;})
});
 
</script>