Skip to content
This repository

Don't transition label positioning attributes. #684

Merged
merged 1 commit into from almost 2 years ago

1 participant

Mike Bostock
Mike Bostock
Owner

The axis component no longer uses a transition for the text elements' dy and
text-anchor attributes. This makes it easier to style the labels using post-
selection, since the transition will not override custom attribute values.

Mike Bostock Don't transition label positioning attributes.
The axis component no longer uses a transition for the text elements' dy and
text-anchor attributes. This makes it easier to style the labels using post-
selection, since the transition will not override custom attribute values.
f7ed030
Mike Bostock mbostock merged commit f7ed030 into from July 02, 2012
Mike Bostock mbostock closed this July 02, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Showing 1 unique commit by 1 author.

Jun 25, 2012
Mike Bostock Don't transition label positioning attributes.
The axis component no longer uses a transition for the text elements' dy and
text-anchor attributes. This makes it easier to style the labels using post-
selection, since the transition will not override custom attribute values.
f7ed030
This page is out of date. Refresh to see the latest.
43  d3.v2.js
@@ -4119,17 +4119,23 @@ d3.svg.axis = function() {
4119 4119
 
4120 4120
       tickEnter.append("line").attr("class", "tick");
4121 4121
       tickEnter.append("text");
4122  
-      tickUpdate.select("text").text(tickFormat);
  4122
+
  4123
+      var lineEnter = tickEnter.select("line"),
  4124
+          lineUpdate = tickUpdate.select("line"),
  4125
+          text = tick.select("text").text(tickFormat),
  4126
+          textEnter = tickEnter.select("text"),
  4127
+          textUpdate = tickUpdate.select("text");
4123 4128
 
4124 4129
       switch (orient) {
4125 4130
         case "bottom": {
4126 4131
           tickTransform = d3_svg_axisX;
4127 4132
           subtickEnter.attr("y2", tickMinorSize);
4128 4133
           subtickUpdate.attr("x2", 0).attr("y2", tickMinorSize);
4129  
-          tickEnter.select("line").attr("y2", tickMajorSize);
4130  
-          tickEnter.select("text").attr("y", Math.max(tickMajorSize, 0) + tickPadding);
4131  
-          tickUpdate.select("line").attr("x2", 0).attr("y2", tickMajorSize);
4132  
-          tickUpdate.select("text").attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding).attr("dy", ".71em").attr("text-anchor", "middle");
  4134
+          lineEnter.attr("y2", tickMajorSize);
  4135
+          textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
  4136
+          lineUpdate.attr("x2", 0).attr("y2", tickMajorSize);
  4137
+          textUpdate.attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding);
  4138
+          text.attr("dy", ".71em").attr("text-anchor", "middle");
4133 4139
           pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize);
4134 4140
           break;
4135 4141
         }
@@ -4137,10 +4143,11 @@ d3.svg.axis = function() {
4137 4143
           tickTransform = d3_svg_axisX;
4138 4144
           subtickEnter.attr("y2", -tickMinorSize);
4139 4145
           subtickUpdate.attr("x2", 0).attr("y2", -tickMinorSize);
4140  
-          tickEnter.select("line").attr("y2", -tickMajorSize);
4141  
-          tickEnter.select("text").attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
4142  
-          tickUpdate.select("line").attr("x2", 0).attr("y2", -tickMajorSize);
4143  
-          tickUpdate.select("text").attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("dy", "0em").attr("text-anchor", "middle");
  4146
+          lineEnter.attr("y2", -tickMajorSize);
  4147
+          textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
  4148
+          lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize);
  4149
+          textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
  4150
+          text.attr("dy", "0em").attr("text-anchor", "middle");
4144 4151
           pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize);
4145 4152
           break;
4146 4153
         }
@@ -4148,10 +4155,11 @@ d3.svg.axis = function() {
4148 4155
           tickTransform = d3_svg_axisY;
4149 4156
           subtickEnter.attr("x2", -tickMinorSize);
4150 4157
           subtickUpdate.attr("x2", -tickMinorSize).attr("y2", 0);
4151  
-          tickEnter.select("line").attr("x2", -tickMajorSize);
4152  
-          tickEnter.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
4153  
-          tickUpdate.select("line").attr("x2", -tickMajorSize).attr("y2", 0);
4154  
-          tickUpdate.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "end");
  4158
+          lineEnter.attr("x2", -tickMajorSize);
  4159
+          textEnter.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
  4160
+          lineUpdate.attr("x2", -tickMajorSize).attr("y2", 0);
  4161
+          textUpdate.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0);
  4162
+          text.attr("dy", ".32em").attr("text-anchor", "end");
4155 4163
           pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize);
4156 4164
           break;
4157 4165
         }
@@ -4159,10 +4167,11 @@ d3.svg.axis = function() {
4159 4167
           tickTransform = d3_svg_axisY;
4160 4168
           subtickEnter.attr("x2", tickMinorSize);
4161 4169
           subtickUpdate.attr("x2", tickMinorSize).attr("y2", 0);
4162  
-          tickEnter.select("line").attr("x2", tickMajorSize);
4163  
-          tickEnter.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding);
4164  
-          tickUpdate.select("line").attr("x2", tickMajorSize).attr("y2", 0);
4165  
-          tickUpdate.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "start");
  4170
+          lineEnter.attr("x2", tickMajorSize);
  4171
+          textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding);
  4172
+          lineUpdate.attr("x2", tickMajorSize).attr("y2", 0);
  4173
+          textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0);
  4174
+          text.attr("dy", ".32em").attr("text-anchor", "start");
4166 4175
           pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize);
4167 4176
           break;
4168 4177
         }
4  d3.v2.min.js
2 additions, 2 deletions not shown
43  src/svg/axis.js
@@ -45,17 +45,23 @@ d3.svg.axis = function() {
45 45
 
46 46
       tickEnter.append("line").attr("class", "tick");
47 47
       tickEnter.append("text");
48  
-      tickUpdate.select("text").text(tickFormat);
  48
+
  49
+      var lineEnter = tickEnter.select("line"),
  50
+          lineUpdate = tickUpdate.select("line"),
  51
+          text = tick.select("text").text(tickFormat),
  52
+          textEnter = tickEnter.select("text"),
  53
+          textUpdate = tickUpdate.select("text");
49 54
 
50 55
       switch (orient) {
51 56
         case "bottom": {
52 57
           tickTransform = d3_svg_axisX;
53 58
           subtickEnter.attr("y2", tickMinorSize);
54 59
           subtickUpdate.attr("x2", 0).attr("y2", tickMinorSize);
55  
-          tickEnter.select("line").attr("y2", tickMajorSize);
56  
-          tickEnter.select("text").attr("y", Math.max(tickMajorSize, 0) + tickPadding);
57  
-          tickUpdate.select("line").attr("x2", 0).attr("y2", tickMajorSize);
58  
-          tickUpdate.select("text").attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding).attr("dy", ".71em").attr("text-anchor", "middle");
  60
+          lineEnter.attr("y2", tickMajorSize);
  61
+          textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
  62
+          lineUpdate.attr("x2", 0).attr("y2", tickMajorSize);
  63
+          textUpdate.attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding);
  64
+          text.attr("dy", ".71em").attr("text-anchor", "middle");
59 65
           pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize);
60 66
           break;
61 67
         }
@@ -63,10 +69,11 @@ d3.svg.axis = function() {
63 69
           tickTransform = d3_svg_axisX;
64 70
           subtickEnter.attr("y2", -tickMinorSize);
65 71
           subtickUpdate.attr("x2", 0).attr("y2", -tickMinorSize);
66  
-          tickEnter.select("line").attr("y2", -tickMajorSize);
67  
-          tickEnter.select("text").attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
68  
-          tickUpdate.select("line").attr("x2", 0).attr("y2", -tickMajorSize);
69  
-          tickUpdate.select("text").attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("dy", "0em").attr("text-anchor", "middle");
  72
+          lineEnter.attr("y2", -tickMajorSize);
  73
+          textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
  74
+          lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize);
  75
+          textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
  76
+          text.attr("dy", "0em").attr("text-anchor", "middle");
70 77
           pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize);
71 78
           break;
72 79
         }
@@ -74,10 +81,11 @@ d3.svg.axis = function() {
74 81
           tickTransform = d3_svg_axisY;
75 82
           subtickEnter.attr("x2", -tickMinorSize);
76 83
           subtickUpdate.attr("x2", -tickMinorSize).attr("y2", 0);
77  
-          tickEnter.select("line").attr("x2", -tickMajorSize);
78  
-          tickEnter.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
79  
-          tickUpdate.select("line").attr("x2", -tickMajorSize).attr("y2", 0);
80  
-          tickUpdate.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "end");
  84
+          lineEnter.attr("x2", -tickMajorSize);
  85
+          textEnter.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
  86
+          lineUpdate.attr("x2", -tickMajorSize).attr("y2", 0);
  87
+          textUpdate.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0);
  88
+          text.attr("dy", ".32em").attr("text-anchor", "end");
81 89
           pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize);
82 90
           break;
83 91
         }
@@ -85,10 +93,11 @@ d3.svg.axis = function() {
85 93
           tickTransform = d3_svg_axisY;
86 94
           subtickEnter.attr("x2", tickMinorSize);
87 95
           subtickUpdate.attr("x2", tickMinorSize).attr("y2", 0);
88  
-          tickEnter.select("line").attr("x2", tickMajorSize);
89  
-          tickEnter.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding);
90  
-          tickUpdate.select("line").attr("x2", tickMajorSize).attr("y2", 0);
91  
-          tickUpdate.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "start");
  96
+          lineEnter.attr("x2", tickMajorSize);
  97
+          textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding);
  98
+          lineUpdate.attr("x2", tickMajorSize).attr("y2", 0);
  99
+          textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0);
  100
+          text.attr("dy", ".32em").attr("text-anchor", "start");
92 101
           pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize);
93 102
           break;
94 103
         }
Commit_comment_tip

Tip: You can add notes to lines in a file. Hover to the left of a line to make a note

Something went wrong with that request. Please try again.