51707

How to tweak d3 axis attributes when transition is present?

Question:

I'm using the d3 axis component but I want to tweak a few things after it is drawn. Specifically I would like to rotate the text labels by adding a transform to the text elements and also setting the text-anchor attribute from "middle" to "end".

The problem I'm hitting is that the text-anchor attribute seems to be set asynchronously by the d3 code as part of the transition. When I set the value to "end" in my code it subsequently gets set back to "middle" when the transition runs.

If I wait until transition end before making my change it's going to look choppy. What I'm wondering is if there is a way to insert myself into the process of drawing and transitioning the axis such that my text-anchor value will be used instead of the default one?

Answer1:

I believe this constitutes a bug in the axis component, so I've created a pull request to <a href="https://github.com/mbostock/d3/pull/684" rel="nofollow">update label attributes immediately</a> rather than as part of the axis transition. The text element's text-anchor attribute can't be interpolated, so there's no reason to defer the update to the transition, and setting it immediately makes it easy for you to fix it using post-selection.

An alternate fix would be to extend the axis component to support different styles of tick labeling. This way, you wouldn't need to use post-selection, so there's no conflict with the axis transition.

Answer2:

This seems something that can't be overridden from the API. A simple but hacky solution would be setting it in your stylesheet...

.x.axis text { text-anchor: end !important; }

Recommend

  • Enumerate rows alphabetized in Oracle
  • lodash _.pullAt returning undefined at path
  • How to print all the result without using Results.columnname in ColdFusion
  • Minimum Cost Flow - network optimization in R
  • UDP socket network disconnect behavior on Windows-Linux-Mac
  • Start another EXE in Managed Code
  • CouchDB views erroring out
  • IE readonly textarea problem
  • Animating an SVG Group
  • Unity 5.1 Animator Controller not transitioning
  • Spring Web Flow exception handling
  • Mockery and Laravel constructor injection
  • Get the pasted content on document on paste event
  • Jquery Mobile pageLoading() Method how does it work?
  • In loopback documentation what does variable 'cb' stands for?
  • close() was never explicitly called on database
  • Eliminate partial duplicate rows from result set
  • ViewController With Transparent Background Entering Current ViewController With Push Transition
  • Transactional Create with Validation in ServiceStack Redis Client
  • Read a local file using javascript
  • Javascript simulate pressing enter in input box
  • C# - Is there a limit to the size of an httpWebRequest stream?
  • Is my CUDA kernel really runs on device or is being mistekenly executed by host in emulation?
  • What is Eclipse's Declaration View used for?
  • PHP - How to update data to MySQL when click a radio button
  • Join two tables and save into third-sql
  • Perl system calls when running as another user using sudo
  • How to handle AllServersUnavailable Exception
  • Jquery - Jquery Wysiwyg return html as a string
  • SVN: Merging two branches together
  • using conditional logic : check if record exists; if it does, update it, if not, create it
  • Acquiring multiple attributes from .xml file in c#
  • How to set the response of a form post action to a iframe source?
  • How to CLICK on IE download dialog box i.e.(Open, Save, Save As…)
  • Change div Background jquery
  • Qt: Run a script BEFORE make
  • How can I remove ASP.NET Designer.cs files?
  • Append folder name and increment by 1 using batch script
  • reshape alternating columns in less time and using less memory
  • java string with new operator and a literal