tag:blogger.com,1999:blog-279772059074318326.post960266954457642238..comments2019-02-22T01:17:00.895-08:00Comments on D3.js Tips and Tricks: How to rotate the text labels for the x Axis of a d3.js graphD3 Noobhttp://www.blogger.com/profile/00927635217604611354noreply@blogger.comBlogger24125tag:blogger.com,1999:blog-279772059074318326.post-61460556923084780122016-06-23T11:37:50.746-07:002016-06-23T11:37:50.746-07:00Apologies for the really late reply. I&#39;m sure ...Apologies for the really late reply. I&#39;m sure that you&#39;ve figured this out long before now, but I&#39;ll answer just in case and if others are interested.<br />Just looking at your section of the code it looks like you have almost combined both the addition of the x axis and the label into a single append.<br />What you would want to do is to separate these into two distinct blocks similar to that demonstrated here; http://bl.ocks.org/d3noob/e1aa61856118edfa624dD3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-42656562471368541162016-04-30T14:31:42.697-07:002016-04-30T14:31:42.697-07:00Absolutely! Adjusting the style would be a neater ...Absolutely! Adjusting the style would be a neater way to go and I would encourage folks to experiment with the code above (Thanks!). For the purposes of learning and experimenting with the rotate transform in d3 (especially as it relates to text), try both. D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-5124438057645547642016-04-30T03:30:16.400-07:002016-04-30T03:30:16.400-07:00.x.axis text {
text-anchor: end !important;
....x.axis text {<br /> text-anchor: end !important;<br /> transform: rotate(-45deg);<br />}GYAN WORLDhttps://www.blogger.com/profile/14575772277227139575noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-89691556574459534352015-07-28T11:53:15.935-07:002015-07-28T11:53:15.935-07:00And sure enough, it was everywhere. All now change...And sure enough, it was everywhere. All now changed in the text above, the book and the code samples. Many thanks again.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-89971578993856722672015-07-28T11:43:41.341-07:002015-07-28T11:43:41.341-07:00Wow! It sure is odd. That&#39;s been there for a c...Wow! It sure is odd. That&#39;s been there for a couple of years! Not just here, but in the book and probably in the example code samples. Great spotting. I feel suitably humbled that my noobishness has been reinforced. Many thanks I will be correcting directly.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-1212728481854719102015-07-27T15:16:04.357-07:002015-07-27T15:16:04.357-07:00I know this is an old example but the line...
.a...I know this is an old example but the line...<br /><br /> .attr(&quot;transform&quot;, function(d) { return &quot;rotate(-65)&quot; });<br /><br />is rather odd.<br /><br />You are not accessing the datum or returning a variable to the transform attribute so you could simplify it to.<br /><br /> .attr(&quot;transform&quot;, &quot;rotate(-65)&quot;);Fraser Chapmanhttps://www.blogger.com/profile/01923453317612077986noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-16992254878583013882015-03-28T10:59:59.740-07:002015-03-28T10:59:59.740-07:00Thank you so much for this post...my headache is g...Thank you so much for this post...my headache is gone from trying to figure this out!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-86505263412498505162015-03-20T08:10:07.643-07:002015-03-20T08:10:07.643-07:00Good article. I am trying to add a horizontal text...Good article. I am trying to add a horizontal text below the x axis but it is not being rendered.<br /><br />I have added the following code for the xaxis<br /> svg.append(&quot;g&quot;)<br /> .attr(&quot;class&quot;, &quot;x axis&quot;)<br /> .attr(&quot;transform&quot;, &quot;translate(0,&quot; + height + &quot;)&quot;)<br /> .call(xAxis)<br /> .selectAll(&quot;text&quot;) // added to display tick label at an angle<br /> .style(&quot;text-anchor&quot;, &quot;end&quot;) // added to display tick label at an angle<br /> .attr(&quot;dx&quot;, &quot;-.8em&quot;) // added to display tick label at an angle<br /> .attr(&quot;dy&quot;, &quot;.15em&quot;) // added to display tick label at an angle<br /> .attr(&quot;transform&quot;, function(d) {return &quot;rotate(-65)&quot;})<br /> .append(&quot;text&quot;) // added to display the label for axis<br /> .attr(&quot;x&quot;, width/2) // added to display the label for axis<br /> .attr(&quot;y&quot;, 40) // added to display the label for axis<br /> .style(&quot;text-anchor&quot;,&quot;middle&quot;) // added to display the label for axis<br /> .text(&quot;Date&quot;); // added to display the label for axis<br /><br /><br />When I remove the code that renders the tick labels at an angle, the x axis label text will be rendered. When I add the code that renders the tick labels at an angle, the x axis label text will not be rendered.<br /><br />How will I be able to achieve both (display the tick label at an angle AND display the x axis label horizontally below the slanted tick labels). <br /><br />Thanksinfo2scshttps://www.blogger.com/profile/09278264031394241156noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-37190537907105062682014-12-18T22:35:06.376-08:002014-12-18T22:35:06.376-08:00Great work!!!Great work!!!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-17774256463736491322014-06-11T02:22:05.315-07:002014-06-11T02:22:05.315-07:00Sure is. It&#39;s as simple as getting the portion...Sure is. It&#39;s as simple as getting the portion of code that does the rotating in the &#39;add x axis&#39; part and duplicate it in the &#39;add y axis part&#39;. Yow will then need to work out the anchor points, spacing and amount of rotation to suit your graph, but this is pretty simple. D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-18936926394004044872014-06-09T11:56:58.126-07:002014-06-09T11:56:58.126-07:00Hi, Is it possible, rotate the text labels of y-ax...Hi, Is it possible, rotate the text labels of y-axis in d3.js?Yesid Balvinhttps://www.blogger.com/profile/07863730328825531448noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-35328427539868436292014-06-04T04:41:18.557-07:002014-06-04T04:41:18.557-07:00Perfect solution.Perfect solution.Paul Brady DT265https://www.blogger.com/profile/11659699768404421383noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-86942392385425904452014-02-18T20:00:23.158-08:002014-02-18T20:00:23.158-08:00Hi Justin, Sorry you&#39;re having difficulty. The...Hi Justin, Sorry you&#39;re having difficulty. The downloads section is a significant weakness with the information I have on d3.js. Deepest apologies. It sounds like you aren&#39;t running a web server that will allow you to access the additional file. I kind on rely on folks reading the book in some parts to help them along. I explain a bit here (https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-web-servers). see if that helps any.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-32882982422576640322014-02-18T14:43:56.088-08:002014-02-18T14:43:56.088-08:00I&#39;d like to see the complete code for this but...I&#39;d like to see the complete code for this but when I download the code library I get errors: <br /><br />&gt; XMLHttpRequest cannot load file:///home/dev/temp/d3noob/data/data.tsv. Cross origin requests are only supported for HTTP. <br /><br />&gt; Uncaught TypeError: Cannot call method &#39;forEach&#39; of undefined @ simple-graph-commented.html:63<br /><br />&gt; Uncaught NetworkError: A network error occurred. @ d3.v3.js:444<br /><br />Chrome 32. Your zip should have a readme that explains how to get the samples running. Justin Collumhttps://www.blogger.com/profile/07190193185280912171noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-57722335121118586362013-07-15T11:04:02.613-07:002013-07-15T11:04:02.613-07:00Great to hear! Thanks for the feedback.Great to hear! Thanks for the feedback.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-61958539760983851692013-07-15T10:31:03.443-07:002013-07-15T10:31:03.443-07:00This saved me so much refactoring time. Great sol...This saved me so much refactoring time. Great solutionAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-9969022989724533502013-06-05T02:01:09.785-07:002013-06-05T02:01:09.785-07:00That is a really good question!
I&#39;m not very f...That is a really good question!<br />I&#39;m not very familiar with nvd3, so I&#39;m not going to be able to give you a straight answer, but If I was troubleshooting the problem, I would look for the point in the initial drawing of the graph when you set up the labels vertically, you will need to set their attributes specifically (rotation wise (it sounds like you&#39;ve already done this)). So what you will need to do is perform the same transformation with the appropriate rotation attribute when you update the graph. So if you were taking the update example from here http://www.d3noob.org/2013/02/update-d3js-data-dynamically-button.html, at the point where we call the function updateData(), you would want to select the axis element and make sure that the same rotation transformation is applied. I hope that makes sense.<br />I don&#39;t know if it will work with your example, because of the differences with nvd3, but if you&#39;re still having trouble, post your code onto StackOverflow and ask there. It&#39;s an interesting question and I would like to think that there will be someone much smarter than me who will know what to do straight off the bat. <br />Good luck.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-62172402150536798482013-06-05T01:13:18.024-07:002013-06-05T01:13:18.024-07:00Good article, but I have a very weird problem, I&#...Good article, but I have a very weird problem, I&#39;m using nvd3 to show a graph with two sets of data, the user can switch from a set to another, triggering the graph update. Something like this: http://nvd3.org/ghpages/multiBar.html<br /><br />After the selection (or any other update of the graph, such as window resizing), the labels are drawn back horizontally, how can I force d3 to rotate labels even after the update?<br /><br />Thank youAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-64122017106062062412013-05-24T03:33:01.760-07:002013-05-24T03:33:01.760-07:00Thanks, clean to understandThanks, clean to understandSurabhi Agarwalhttps://www.blogger.com/profile/09247265706935661817noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-70652762291714115372013-05-04T08:30:43.464-07:002013-05-04T08:30:43.464-07:00Thank you, very useful!!Thank you, very useful!!Steve Walkerhttp://stephenwalker.comnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-69200320929921058522013-04-06T04:06:26.381-07:002013-04-06T04:06:26.381-07:00Thanks, super helpful!Thanks, super helpful!Davohttps://www.blogger.com/profile/18096145486193151263noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-60780025232908977582013-03-13T11:50:36.471-07:002013-03-13T11:50:36.471-07:00Thanks Edward. That&#39;s good information to have...Thanks Edward. That&#39;s good information to have!D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-10721882314599356822013-03-13T06:57:53.061-07:002013-03-13T06:57:53.061-07:00I had a similar experience back in 2012. Here&#39...I had a similar experience back in 2012. Here&#39;s my stackoverflow post:<br /><br />http://stackoverflow.com/questions/11814399/need-help-lining-up-x-axis-ticks-with-bars-in-d3-js-bar-chart<br /><br />And javascript fiddle:<br /><br />http://jsfiddle.net/MmEjF/Edward Stemblerhttps://www.blogger.com/profile/03677678165776497816noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-79696311762821605462013-03-04T15:00:52.187-08:002013-03-04T15:00:52.187-08:00Thank you!!Thank you!!Anonymousnoreply@blogger.com