tag:blogger.com,1999:blog-279772059074318326.post8163317391829437322..comments2023-12-30T11:14:38.564-08:00Comments on D3.js Tips and Tricks: Adding grid lines to a d3.js graphD3 Noobhttp://www.blogger.com/profile/00927635217604611354noreply@blogger.comBlogger23125tag:blogger.com,1999:blog-279772059074318326.post-51991706302169636532018-01-31T11:13:47.418-08:002018-01-31T11:13:47.418-08:00tHAnK yOu vERy mUCh !!! foR tHIs pOsT aTlAsT i hAv...tHAnK yOu vERy mUCh !!! foR tHIs pOsT aTlAsT i hAvE aDDeD gRId lINEs tO mY gRAPh !! ;-() aFTEr sO MUcH oF sTRUggLIng Anonymoushttps://www.blogger.com/profile/03537314731786393735noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-65914071014342289872015-12-25T10:13:21.785-08:002015-12-25T10:13:21.785-08:00This technique should still work for adding dynami...This technique should still work for adding dynamic ticks. Since it uses the ticks themselves to draw the grid lines you should be good to go. The one thing that might be tripping you up is if the instructions to draw the ticks aren't included in the re-rendered part of your code. Just make sure that they're refreshed on any change and they should work.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-31188329370516252882015-12-25T10:02:30.831-08:002015-12-25T10:02:30.831-08:00It looks like you're on the right track. Certa...It looks like you're on the right track. Certainly looking at the formatting instructions here https://github.com/mbostock/d3/wiki/Formatting#d3_format it looks right. perhaps the only thing that might be tripping you up could be the use of single speaeh marks ' rather than double speechmarks " surrounding the d.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-29920711658599063272015-10-30T00:35:39.334-07:002015-10-30T00:35:39.334-07:00Hi all i want to add only positive number and 0 ... Hi all i want to add only positive number and 0 on y axis like 0,1,2,3,..n , <br /><br />i am using <br /><br />lineChart.yAxis<br /> .axisLabel('Users').tickFormat(d3.format('d'));<br /><br /><br />But did not get what i want can any one helps ?<br /><br />ThanksAnonymoushttps://www.blogger.com/profile/03041487746090995408noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-37027696243278969722015-10-09T11:29:20.557-07:002015-10-09T11:29:20.557-07:00Hi, how can I dynamically add grid lines for every...Hi, how can I dynamically add grid lines for every tick value? My ticks are generated dynamically based on the domain function I wrote.<br />Thanks!Anonymoushttps://www.blogger.com/profile/10957299871675174157noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-364459145033667952015-04-07T22:35:27.106-07:002015-04-07T22:35:27.106-07:00No. This post tells you how to add grid lines to a...No. This post tells you how to add grid lines to a graph. They are similar, but I think you might be looking for something along the lines of https://leanpub.com/D3-Tips-and-Tricks/read#leanpub-auto-setting-up-the-axes. I recommend that you download a copy of the book (https://leanpub.com/D3-Tips-and-Tricks, It's free) and follow along the section on setting up a simple graph which will provide some additional context. Good luck.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-81653585566076261792015-04-07T14:25:34.593-07:002015-04-07T14:25:34.593-07:00This don't tell me how to add x and y axisThis don't tell me how to add x and y axisAnonymoushttps://www.blogger.com/profile/11863254329400710316noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-34214364141373378902013-07-03T02:43:40.142-07:002013-07-03T02:43:40.142-07:00Clever! Good work around.Clever! Good work around.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-22829664859998682812013-07-02T13:58:31.391-07:002013-07-02T13:58:31.391-07:00Here's something I've found: when the doma...Here's something I've found: when the domains begin and end with values that land exactly where a tick would be, labels are produced for the endpoints of the axis.<br /><br />So I wrote a function to find the closest tick values preceding and following my dataset. This means the line won't be butted up against the edges of the graph, which works for me as I wanted to pad my data anyhow.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-77773944784563100832013-07-02T11:42:55.765-07:002013-07-02T11:42:55.765-07:00OK, that's interesting. Looking at .tickValues...OK, that's interesting. Looking at .tickValues a little more closely, it should work in conjunction with .ticks (https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues. I would have therefore have expected to be able to use the tickValues([max/min]) settings for the outer values on the x axis and normal .ticks for the inner. That should preserve the automagic and everyone should go home happy. However, I've run a couple of examples and I can't get the desired effect. Hmm.... This will require more thought.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-1502307412294331302013-07-02T06:36:35.542-07:002013-07-02T06:36:35.542-07:00Right, I was aware of those methods, but I wanted ...Right, I was aware of those methods, but I wanted to preserve the automagic of the axis generator while simply adding the endpoints. And I asked only because my searches have come up nil so far :)<br /><br />I'm dealing with diverse data sets and I didn't want to limit or explicitly specify the number of ticks or write my own function to replicate and extend the axis generator.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-17855877427378594042013-07-02T03:45:37.461-07:002013-07-02T03:45:37.461-07:00I couldn't help myself and I had a quick look....I couldn't help myself and I had a quick look. This would be a start... http://stackoverflow.com/questions/14708802/d3js-axis-dates-start-and-end-value-only It's not the answer you REALLY want, but it would do what you want in conjunction with the current code. However, there will be a better way.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-38067805079961463062013-07-02T03:39:41.905-07:002013-07-02T03:39:41.905-07:00No, I think this is a good place to ask :-).
Unfor...No, I think this is a good place to ask :-).<br />Unfortunately I don't know the answer off the top of my head. Have a search on stack overflow and the google groups for d3js and if you come up with nothing drop me a reminder here and I'll dig into it in a week or so (little busy just at the moment sorry). Good question.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-74760367784026854292013-07-01T12:09:01.411-07:002013-07-01T12:09:01.411-07:00I'm quite certain this is the wrong place to a...I'm quite certain this is the wrong place to ask this, but I'm not sure where the right place is. Feel free to point me elsewhere:<br /><br />How can I label the x-axis origin and right-hand extreme in this example? (So that it explicitly says March 25 and the ending date on those tick marks)Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-75330403871833372372013-06-16T20:02:47.093-07:002013-06-16T20:02:47.093-07:00Thanks! This was perfect.Thanks! This was perfect.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-9478806920591794562013-06-12T11:10:57.903-07:002013-06-12T11:10:57.903-07:00Ahh yes, the order that you put your 'append&#...Ahh yes, the order that you put your 'append' blocks of code for the grids are after the one for the lines. Just change the order so that the appends for the grid lines come before the lines and you should be fine. If that doesn't work post your code onto Stack Overflow or github and I can take a look. But I think this will solve the problem. Good luck.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-35831866368577825042013-06-12T05:39:16.191-07:002013-06-12T05:39:16.191-07:00very useful tutorial.
I have created one bubble c...very useful tutorial.<br /><br />I have created one bubble chart. Added grid lines using this tutorial. But the grid lines are appearing infront of bubbles. Any guess what could be the problem or you have any solution to this?<br />please help.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-10848851758640352162013-05-01T21:44:18.588-07:002013-05-01T21:44:18.588-07:00That's an interesting problem. Are you able to...That's an interesting problem. Are you able to post the details and perhaps sample code on Stack Overflow?D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-58651832019939785622013-05-01T12:47:56.890-07:002013-05-01T12:47:56.890-07:00Hi, thanks for the useful tutorial.
I would like t...Hi, thanks for the useful tutorial.<br />I would like to translate the vertical gridlines along the x axis. I've tried to use the transition on the element returned from the call to svg.append, but after the first update the gridline disappears. <br />It would be great if you could add a section to achieve this behavior.<br /><br />Thanks!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-86111097749512599332013-01-29T18:51:41.835-08:002013-01-29T18:51:41.835-08:00Thanks, That sounds good.Thanks, That sounds good.D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-32349498707407678232013-01-29T10:07:06.819-08:002013-01-29T10:07:06.819-08:00I am interested in major / minor gridlines. I Thin...I am interested in major / minor gridlines. I Think you have to use: # axis.tickSubdivide([count]) to see minor ticks (ie gridlines). I am a noob so still investigating.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-42862883908295432962013-01-29T00:23:51.797-08:002013-01-29T00:23:51.797-08:00Great news. Enjoy D3!Great news. Enjoy D3!D3noobhttps://www.blogger.com/profile/03091573479428198379noreply@blogger.comtag:blogger.com,1999:blog-279772059074318326.post-15095932497713811052013-01-28T23:19:29.522-08:002013-01-28T23:19:29.522-08:00it is very useful to meit is very useful to memaheshanhttps://www.blogger.com/profile/12856885214694039942noreply@blogger.com