MathJax Equation Demo

HTML

<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML&amp;dummy=.js"></script>
<script type="text/x-mathjax-config"> MathJax.Hub.Config({   tex2jax: {inlineMath: [['$','$'], ['\\[','\\]']]} }); </script>


I'm trying to achieve the following equation,
\[\beta_V = \frac{D}{V}\beta_D + \frac{E}{V}\beta_E\]
but with up or down arrows centered above the terms.<br/>
These are my attempts using different methods, in order of preference.<br/>
Method 1. Problem is that arrows are left-aligned rather than center-aligned. Otherwise this is ideal:

\[\begin{alignat*}{9}
&&&\cdot      &&   &&\uparrow    &&\uparrow   &&\downarrow &&\uparrow \\
&&&\beta_V &&= &&\frac{D}{V}&&\beta_D + &&\frac{E}{V}   &&\beta_E \\
\end{alignat*}\]

Method 2. Problem is that the tex code is very verbose and the arrows are not horizontally aligned:
\[\begin{matrix} \cdot \\ \beta_V \\ \end{matrix} \begin{matrix} \phantom{1} \\ =  \\ \end{matrix} \begin{matrix} \uparrow \\ \frac{D}{V} \\ \end{matrix} \begin{matrix} \uparrow \\ \beta_D \\ \end{matrix} \begin{matrix} \phantom{1} \\ +  \\ \end{matrix} \begin{matrix} \downarrow \\ \frac{E}{V} \\ \end{matrix} \begin{matrix} \uparrow \\ \beta_E \\ \end{matrix}\]

Method 3. Problem is that the brackets are ugly:
\[\overbrace{\beta_V}^{\cdot} = \overbrace{\frac{D}{V}}^{\uparrow} \overbrace{\beta_D}^{\uparrow} + \overbrace{\frac{E}{V}}^{\downarrow} \overbrace{\beta_E}^{\uparrow}\]

The ideal method that I found in the first answer on <a href='http://tex.stackexchange.com/questions/102816/centering-equations-within-alignat-command'>this stack exchange post</a> which uses the array formula with additional parameters as follows:
\[\begin{array}{c @{{}={}} c c @{{}+{}} c c}
\cdot & \uparrow & \uparrow & & \downarrow & \uparrow \\
\beta_V  & \frac{D}{V} & \beta_D & & \frac{D}{E} & \beta_E \\
\end{array}\]

But unfortunately MathJax doesn't support the array function's additional parameters so the equals sign and plus sign are...