Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Don't transition label positioning attributes. #684

Merged
merged 1 commit into from

1 participant

@mbostock
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.

@mbostock 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
@mbostock mbostock merged commit f7ed030 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 25, 2012
  1. Don't transition label positioning attributes.

    authored
    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.
This page is out of date. Refresh to see the latest.
Showing with 54 additions and 36 deletions.
  1. +26 −17 d3.v2.js
  2. +2 −2 d3.v2.min.js
  3. +26 −17 src/svg/axis.js
View
43 d3.v2.js
@@ -4119,17 +4119,23 @@ d3.svg.axis = function() {
tickEnter.append("line").attr("class", "tick");
tickEnter.append("text");
- tickUpdate.select("text").text(tickFormat);
+
+ var lineEnter = tickEnter.select("line"),
+ lineUpdate = tickUpdate.select("line"),
+ text = tick.select("text").text(tickFormat),
+ textEnter = tickEnter.select("text"),
+ textUpdate = tickUpdate.select("text");
switch (orient) {
case "bottom": {
tickTransform = d3_svg_axisX;
subtickEnter.attr("y2", tickMinorSize);
subtickUpdate.attr("x2", 0).attr("y2", tickMinorSize);
- tickEnter.select("line").attr("y2", tickMajorSize);
- tickEnter.select("text").attr("y", Math.max(tickMajorSize, 0) + tickPadding);
- tickUpdate.select("line").attr("x2", 0).attr("y2", tickMajorSize);
- tickUpdate.select("text").attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding).attr("dy", ".71em").attr("text-anchor", "middle");
+ lineEnter.attr("y2", tickMajorSize);
+ textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
+ lineUpdate.attr("x2", 0).attr("y2", tickMajorSize);
+ textUpdate.attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding);
+ text.attr("dy", ".71em").attr("text-anchor", "middle");
pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize);
break;
}
@@ -4137,10 +4143,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisX;
subtickEnter.attr("y2", -tickMinorSize);
subtickUpdate.attr("x2", 0).attr("y2", -tickMinorSize);
- tickEnter.select("line").attr("y2", -tickMajorSize);
- tickEnter.select("text").attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
- tickUpdate.select("line").attr("x2", 0).attr("y2", -tickMajorSize);
- tickUpdate.select("text").attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("dy", "0em").attr("text-anchor", "middle");
+ lineEnter.attr("y2", -tickMajorSize);
+ textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
+ lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize);
+ textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
+ text.attr("dy", "0em").attr("text-anchor", "middle");
pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize);
break;
}
@@ -4148,10 +4155,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisY;
subtickEnter.attr("x2", -tickMinorSize);
subtickUpdate.attr("x2", -tickMinorSize).attr("y2", 0);
- tickEnter.select("line").attr("x2", -tickMajorSize);
- tickEnter.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
- tickUpdate.select("line").attr("x2", -tickMajorSize).attr("y2", 0);
- tickUpdate.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "end");
+ lineEnter.attr("x2", -tickMajorSize);
+ textEnter.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
+ lineUpdate.attr("x2", -tickMajorSize).attr("y2", 0);
+ textUpdate.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0);
+ text.attr("dy", ".32em").attr("text-anchor", "end");
pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize);
break;
}
@@ -4159,10 +4167,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisY;
subtickEnter.attr("x2", tickMinorSize);
subtickUpdate.attr("x2", tickMinorSize).attr("y2", 0);
- tickEnter.select("line").attr("x2", tickMajorSize);
- tickEnter.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding);
- tickUpdate.select("line").attr("x2", tickMajorSize).attr("y2", 0);
- tickUpdate.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "start");
+ lineEnter.attr("x2", tickMajorSize);
+ textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding);
+ lineUpdate.attr("x2", tickMajorSize).attr("y2", 0);
+ textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0);
+ text.attr("dy", ".32em").attr("text-anchor", "start");
pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize);
break;
}
View
4 d3.v2.min.js
2 additions, 2 deletions not shown
View
43 src/svg/axis.js
@@ -45,17 +45,23 @@ d3.svg.axis = function() {
tickEnter.append("line").attr("class", "tick");
tickEnter.append("text");
- tickUpdate.select("text").text(tickFormat);
+
+ var lineEnter = tickEnter.select("line"),
+ lineUpdate = tickUpdate.select("line"),
+ text = tick.select("text").text(tickFormat),
+ textEnter = tickEnter.select("text"),
+ textUpdate = tickUpdate.select("text");
switch (orient) {
case "bottom": {
tickTransform = d3_svg_axisX;
subtickEnter.attr("y2", tickMinorSize);
subtickUpdate.attr("x2", 0).attr("y2", tickMinorSize);
- tickEnter.select("line").attr("y2", tickMajorSize);
- tickEnter.select("text").attr("y", Math.max(tickMajorSize, 0) + tickPadding);
- tickUpdate.select("line").attr("x2", 0).attr("y2", tickMajorSize);
- tickUpdate.select("text").attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding).attr("dy", ".71em").attr("text-anchor", "middle");
+ lineEnter.attr("y2", tickMajorSize);
+ textEnter.attr("y", Math.max(tickMajorSize, 0) + tickPadding);
+ lineUpdate.attr("x2", 0).attr("y2", tickMajorSize);
+ textUpdate.attr("x", 0).attr("y", Math.max(tickMajorSize, 0) + tickPadding);
+ text.attr("dy", ".71em").attr("text-anchor", "middle");
pathUpdate.attr("d", "M" + range[0] + "," + tickEndSize + "V0H" + range[1] + "V" + tickEndSize);
break;
}
@@ -63,10 +69,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisX;
subtickEnter.attr("y2", -tickMinorSize);
subtickUpdate.attr("x2", 0).attr("y2", -tickMinorSize);
- tickEnter.select("line").attr("y2", -tickMajorSize);
- tickEnter.select("text").attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
- tickUpdate.select("line").attr("x2", 0).attr("y2", -tickMajorSize);
- tickUpdate.select("text").attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("dy", "0em").attr("text-anchor", "middle");
+ lineEnter.attr("y2", -tickMajorSize);
+ textEnter.attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
+ lineUpdate.attr("x2", 0).attr("y2", -tickMajorSize);
+ textUpdate.attr("x", 0).attr("y", -(Math.max(tickMajorSize, 0) + tickPadding));
+ text.attr("dy", "0em").attr("text-anchor", "middle");
pathUpdate.attr("d", "M" + range[0] + "," + -tickEndSize + "V0H" + range[1] + "V" + -tickEndSize);
break;
}
@@ -74,10 +81,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisY;
subtickEnter.attr("x2", -tickMinorSize);
subtickUpdate.attr("x2", -tickMinorSize).attr("y2", 0);
- tickEnter.select("line").attr("x2", -tickMajorSize);
- tickEnter.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
- tickUpdate.select("line").attr("x2", -tickMajorSize).attr("y2", 0);
- tickUpdate.select("text").attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "end");
+ lineEnter.attr("x2", -tickMajorSize);
+ textEnter.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding));
+ lineUpdate.attr("x2", -tickMajorSize).attr("y2", 0);
+ textUpdate.attr("x", -(Math.max(tickMajorSize, 0) + tickPadding)).attr("y", 0);
+ text.attr("dy", ".32em").attr("text-anchor", "end");
pathUpdate.attr("d", "M" + -tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + -tickEndSize);
break;
}
@@ -85,10 +93,11 @@ d3.svg.axis = function() {
tickTransform = d3_svg_axisY;
subtickEnter.attr("x2", tickMinorSize);
subtickUpdate.attr("x2", tickMinorSize).attr("y2", 0);
- tickEnter.select("line").attr("x2", tickMajorSize);
- tickEnter.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding);
- tickUpdate.select("line").attr("x2", tickMajorSize).attr("y2", 0);
- tickUpdate.select("text").attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0).attr("dy", ".32em").attr("text-anchor", "start");
+ lineEnter.attr("x2", tickMajorSize);
+ textEnter.attr("x", Math.max(tickMajorSize, 0) + tickPadding);
+ lineUpdate.attr("x2", tickMajorSize).attr("y2", 0);
+ textUpdate.attr("x", Math.max(tickMajorSize, 0) + tickPadding).attr("y", 0);
+ text.attr("dy", ".32em").attr("text-anchor", "start");
pathUpdate.attr("d", "M" + tickEndSize + "," + range[0] + "H0V" + range[1] + "H" + tickEndSize);
break;
}
Something went wrong with that request. Please try again.