Manual Grid Lines & Tick Marks

Nov 3, 2009 at 3:16 PM

Mikhail,

Is there any way to create manual grid lines and tick marks?

That is ... I would like to tell the D3 component that I want a grid line at these values and I want the gridlines to look like this. And the same for the tick marks.

Can you point me to some sample code, if the chart does support this?

Cory

Editor
Nov 6, 2009 at 6:13 PM

Hi Cory,

if you want different ticks for axisGrid and corresponding axes, than it is impossible now. AxisGrid takes its lines' coordinates from axes.

You can easily send your own ticks to any axis - simply:

1) create your own class, implementing ITicksProvider<TickType>:

 

        /// <summary>
	///	Base interface for ticks generator.
	/// </summary>
	/// <typeparam name="T"></typeparam>
	public interface ITicksProvider<T>
	{
		/// <summary>
		/// Generates ticks for given range and preferred ticks count.
		/// </summary>
		/// <param name="range">The range.</param>
		/// <param name="ticksCount">The ticks count.</param>
		/// <returns></returns>
		ITicksInfo<T> GetTicks(Range<T> range, int ticksCount);
		/// <summary>
		/// Decreases the tick count.
		/// Returned value should be later passed as ticksCount parameter to GetTicks method.
		/// </summary>
		/// <param name="ticksCount">The ticks count.</param>
		/// <returns>Decreased ticks count.</returns>
		int DecreaseTickCount(int ticksCount);
		/// <summary>
		/// Increases the tick count.
		/// Returned value should be later passed as ticksCount parameter to GetTicks method.
		/// </summary>
		/// <param name="ticksCount">The ticks count.</param>
		/// <returns>Increased ticks count.</returns>
		int IncreaseTickCount(int ticksCount);

		/// <summary>
		/// Gets the minor ticks provider, used to generate ticks between each two adjacent ticks.
		/// </summary>
		/// <value>The minor provider. If there is no minor provider available, returns null.</value>
		ITicksProvider<T> MinorProvider { get; }
		/// <summary>
		/// Gets the mayor provider, used to generate mayor ticks - for example, years for common ticks as months.
		/// </summary>
		/// <value>The mayor provider. If there is no mayor provider available, returns null.</value>
		ITicksProvider<T> MayorProvider { get; }

		/// <summary>
		/// Occurs when properties of ticks provider changeds.
		/// Notifies axis to rebuild its view.
		/// </summary>
		event EventHandler Changed;
	}

or you can create a descendant class of any of this interface existing implementers.

2) pass an instance of this class to axis: axis.TicksProvider = new YourTicksProvider();

That's is how you can have custom axis ticks.

 

Best regards,

Mikhail.