Better axis position

hitier
1 parent 17a768f8
Showing 1 changed file with 30 additions and 8 deletions Show diff stats
app/main/templates/agent.html
@@ -48,6 +48,8 @@
       width = 900 - margin.left - margin.right,
       height = 500 - margin.top - margin.bottom;
  
+  const tooltip_offset = {dx: 300, dy: 120}
+
   const x = d3.scaleBand()
       .range([0, width])
       .padding(0.2);
@@ -97,10 +99,20 @@
         .domain(periods)
         .range([0, width])
         .padding(0.2)
-
-    svg.append('g')
-        .attr('transform', 'translate(20, ' + height + ')')
-        .call(d3.axisBottom(x).tickSizeOuter(0));
+    // Ajout de l'axe X au SVG
+    // Déplacement de l'axe horizontal et du futur texte (via la fonction translate) au bas du SVG
+    // Selection des noeuds text, positionnement puis rotation
+    // svg.append('g')
+    //     .attr('transform', 'translate(20, ' + height + ')')
+    //     .call(d3.axisBottom(x).tickSizeOuter(0));
+    svg.append("g")
+        .attr("transform", "translate(20," + height + ")")
+        .call(d3.axisBottom(x).tickSize(5))
+        .selectAll("text")
+        .style("text-anchor", "end")
+        .attr("dx", "-.8em")
+        .attr("dy", ".15em")
+        .attr("transform", "rotate(-65)");
  
     var y = d3.scaleLinear()
         .domain([0, 100])
@@ -110,6 +122,15 @@
         .attr('transform', 'translate(20, 0)')
         .call(d3.axisLeft(y))
  
+
+    svg.append("text")
+        .attr("text-anchor", "end")
+        .attr("transform", "rotate(-90)")
+        .attr("y", -margin.left + 60)
+        .attr("x", -margin.top - 70)
+        .text("Charge (ETP)")
+
+
     var color = d3.scaleOrdinal()
         .domain(projects)
         .range(['#e41a1c', '#377eb8', '#4daf4a',
@@ -160,8 +181,8 @@
  
     var mousemove = function (e, d) {
       tooltip
-          .style("left", (e.x - 400) + "px")
-          .style("top", (e.y - 90) + "px")
+          .style("left", (e.x - tooltip_offset.dx) + "px")
+          .style("top", (e.y - tooltip_offset.dy) + "px")
     }
  
     var mouseleave = function (d) {
@@ -174,11 +195,12 @@
     var mouseover = function (e, d) {
       var project_name = d3.select(this.parentNode).datum().key
       var project_charge = d.data[project_name]
-      tooltip.transition()
+      tooltip
+          .transition()
           .duration(200)
           .style("opacity", 1);
       tooltip
-          .html("Project: " + project_name + "<br>" + "Charge: " + project_charge+"%")
+          .html("Project: " + project_name + "<br>" + "Charge: " + project_charge + "%")
           .style("left", (e.x - 400) + "px")
           .style("top", (e.y - 90) + "px");
     }