Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Idiomatic way to add x-axis, y-axis and tooltips #93

Open
ramnathv opened this issue Apr 7, 2014 · 5 comments
Open

Idiomatic way to add x-axis, y-axis and tooltips #93

ramnathv opened this issue Apr 7, 2014 · 5 comments

Comments

@ramnathv
Copy link

ramnathv commented Apr 7, 2014

I am really enjoying converting my d3.js code to d3.chart to make it reusable. I have been working on a d3.scatter component for d3.chart and you can see my work in progress here

http://jsfiddle.net/ramnathv/vtC75/2/

One question I had was regarding the idiomatic way to add x-axis, y-axis and tooltips. In some ways, these can be regarded as layers. Currently, I am sticking the code that creates the x-axis and y-axis directly inside the insert method. However, this is not modular and I have a niggling feeling that there is a cleaner solution to this problem. Any thoughts would be appreciated.

Once I clean this up, I will contribute this to d3.chart as a reusable chart component.

insert: function() {
 // invoke x-axis in context of the visualization
  chart.base.select('g')
   .append('g')
   .classed('x axis', true)
   .attr("transform", "translate(0," + chart.height() + ")")  
   .call(chart.xAxis)

// invoke tooltip in context
 chart.base
   .call(chart.tip)

// invoke y-axis in context
 chart.base.select('g')
   .append('g')
   .classed('y axis', true)
   .call(chart.yAxis)


  return this.append('circle')
    .attr('class', 'circle');
}
@samselikoff
Copy link

Here's one implementation I've used: https://gist.github.com/samselikoff/10014195

@ramnathv
Copy link
Author

ramnathv commented Apr 7, 2014

Nice! This is even better than what I was looking for as it basically provides a reusable axis component. Let me go through your implementation to get a hang of how I can use it in my context.

@peteb4ker
Copy link

Sam,

Thanks for posting the xaxis component example. I'm working on something
similar and this is a good reference to see how else to do it!

I notice on Line 71 you refer to the 'duration' method. Is this something
not included in the gist?

https://gist.github.com/samselikoff/10014195#file-xaxis-js-L71

Pete

On 6 April 2014 20:06, Ramnath Vaidyanathan notifications@github.comwrote:

Nice! This is even better than what I was looking for as it basically
provides a reusable axis component. Let me go through your implementation
to get a hang of how I can use it in my context.

Reply to this email directly or view it on GitHubhttps://github.com//issues/93#issuecomment-39692800
.

http://about.me/petebaker

@peteb4ker
Copy link

Oops - I see now it refers to the d3 Transitions#duration method:

https://github.com/mbostock/d3/wiki/Transitions#duration

Pete

@nareshbhatia
Copy link

@samselikoff, I quickly looked at your implementation. While I have not tried to run it, it seems to make sense to treat your x-axis as a independent chart - you are indeed doing something with the data in your merge event, which is consistent with the 'layer' concept in d3.chart.

However, I would like to get an opinion from the group about how to treat the axes in very simple cases. For example, once the axes are set up, we can draw them completely using a single call - selection.call(axis). In such cases, the axes really don't feel like an independent chart or even a layer - there are no enter, update or remove selections that layers are geared towards. I feel that in 90% of the cases, the axes can be treated as components that are not layers and can be taken care of in simple function overrides. For example, we can introduce preDraw() and postDraw() methods in Chart.draw() and axes can be drawn in one of the overrides:

Chart.prototype.draw = function(data) {

    var layerName, attachmentName, attachmentData;

    data = transformCascade.call(this, this, data);

    this.preDraw(data);

    // draw layers
    ...

    // draw attachments
    ...

    this.postDraw(data);
};

Thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants