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

[ramnathv]

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]

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

[ramnathv]

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]

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 [email protected]:

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]

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

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

Pete

[nareshbhatia]

@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?