Commit 94071fee0f048909d7d272679ef83c04816c37a2
1 parent
17a768f8
Exists in
master
and in
4 other branches
Better axis position
Showing
1 changed file
with
30 additions
and
8 deletions
Show diff stats
app/main/templates/agent.html
| @@ -48,6 +48,8 @@ | @@ -48,6 +48,8 @@ | ||
| 48 | width = 900 - margin.left - margin.right, | 48 | width = 900 - margin.left - margin.right, |
| 49 | height = 500 - margin.top - margin.bottom; | 49 | height = 500 - margin.top - margin.bottom; |
| 50 | 50 | ||
| 51 | + const tooltip_offset = {dx: 300, dy: 120} | ||
| 52 | + | ||
| 51 | const x = d3.scaleBand() | 53 | const x = d3.scaleBand() |
| 52 | .range([0, width]) | 54 | .range([0, width]) |
| 53 | .padding(0.2); | 55 | .padding(0.2); |
| @@ -97,10 +99,20 @@ | @@ -97,10 +99,20 @@ | ||
| 97 | .domain(periods) | 99 | .domain(periods) |
| 98 | .range([0, width]) | 100 | .range([0, width]) |
| 99 | .padding(0.2) | 101 | .padding(0.2) |
| 100 | - | ||
| 101 | - svg.append('g') | ||
| 102 | - .attr('transform', 'translate(20, ' + height + ')') | ||
| 103 | - .call(d3.axisBottom(x).tickSizeOuter(0)); | 102 | + // Ajout de l'axe X au SVG |
| 103 | + // Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG | ||
| 104 | + // Selection des noeuds text, positionnement puis rotation | ||
| 105 | + // svg.append('g') | ||
| 106 | + // .attr('transform', 'translate(20, ' + height + ')') | ||
| 107 | + // .call(d3.axisBottom(x).tickSizeOuter(0)); | ||
| 108 | + svg.append("g") | ||
| 109 | + .attr("transform", "translate(20," + height + ")") | ||
| 110 | + .call(d3.axisBottom(x).tickSize(5)) | ||
| 111 | + .selectAll("text") | ||
| 112 | + .style("text-anchor", "end") | ||
| 113 | + .attr("dx", "-.8em") | ||
| 114 | + .attr("dy", ".15em") | ||
| 115 | + .attr("transform", "rotate(-65)"); | ||
| 104 | 116 | ||
| 105 | var y = d3.scaleLinear() | 117 | var y = d3.scaleLinear() |
| 106 | .domain([0, 100]) | 118 | .domain([0, 100]) |
| @@ -110,6 +122,15 @@ | @@ -110,6 +122,15 @@ | ||
| 110 | .attr('transform', 'translate(20, 0)') | 122 | .attr('transform', 'translate(20, 0)') |
| 111 | .call(d3.axisLeft(y)) | 123 | .call(d3.axisLeft(y)) |
| 112 | 124 | ||
| 125 | + | ||
| 126 | + svg.append("text") | ||
| 127 | + .attr("text-anchor", "end") | ||
| 128 | + .attr("transform", "rotate(-90)") | ||
| 129 | + .attr("y", -margin.left + 60) | ||
| 130 | + .attr("x", -margin.top - 70) | ||
| 131 | + .text("Charge (ETP)") | ||
| 132 | + | ||
| 133 | + | ||
| 113 | var color = d3.scaleOrdinal() | 134 | var color = d3.scaleOrdinal() |
| 114 | .domain(projects) | 135 | .domain(projects) |
| 115 | .range(['#e41a1c', '#377eb8', '#4daf4a', | 136 | .range(['#e41a1c', '#377eb8', '#4daf4a', |
| @@ -160,8 +181,8 @@ | @@ -160,8 +181,8 @@ | ||
| 160 | 181 | ||
| 161 | var mousemove = function (e, d) { | 182 | var mousemove = function (e, d) { |
| 162 | tooltip | 183 | tooltip |
| 163 | - .style("left", (e.x - 400) + "px") | ||
| 164 | - .style("top", (e.y - 90) + "px") | 184 | + .style("left", (e.x - tooltip_offset.dx) + "px") |
| 185 | + .style("top", (e.y - tooltip_offset.dy) + "px") | ||
| 165 | } | 186 | } |
| 166 | 187 | ||
| 167 | var mouseleave = function (d) { | 188 | var mouseleave = function (d) { |
| @@ -174,11 +195,12 @@ | @@ -174,11 +195,12 @@ | ||
| 174 | var mouseover = function (e, d) { | 195 | var mouseover = function (e, d) { |
| 175 | var project_name = d3.select(this.parentNode).datum().key | 196 | var project_name = d3.select(this.parentNode).datum().key |
| 176 | var project_charge = d.data[project_name] | 197 | var project_charge = d.data[project_name] |
| 177 | - tooltip.transition() | 198 | + tooltip |
| 199 | + .transition() | ||
| 178 | .duration(200) | 200 | .duration(200) |
| 179 | .style("opacity", 1); | 201 | .style("opacity", 1); |
| 180 | tooltip | 202 | tooltip |
| 181 | - .html("Project: " + project_name + "<br>" + "Charge: " + project_charge+"%") | 203 | + .html("Project: " + project_name + "<br>" + "Charge: " + project_charge + "%") |
| 182 | .style("left", (e.x - 400) + "px") | 204 | .style("left", (e.x - 400) + "px") |
| 183 | .style("top", (e.y - 90) + "px"); | 205 | .style("top", (e.y - 90) + "px"); |
| 184 | } | 206 | } |