how to display the co-ordinates of the point in tooltip of D3 chart

Question

I have generated a graph using the tutorial provided by James McCaffrey : http://msdn.microsoft.com/en-us/magazine/ff714591.aspx

Iam able to do so successfully. Also I have added a tooltip as follows:

plotter.AddLineGraph(compositeDataSource1,
new Pen(Brushes.Blue, 2),
new CircleElementPointMarker{ Size = 10.0, Fill = Brushes.Red ,Tooltip="Coordinates"},
new PenDescription("Number bugs open"));

My Question is : how do I display the co-ordinates of the point in tooltip.?

Answer 1

This is how I solved my issue.

EnumerableDataSource<TPoint> edc;
edc= new EnumerableDataSource<TPoint>(List_Of_TPoint);
            edc.SetXMapping(x => dateAxis.ConvertToDouble(x.X));
            edc.SetYMapping(y => Convert.ToDouble(y.Y));
            edc.AddMapping(CircleElementPointMarker.ToolTipTextProperty, s => String.Format("Y-Data : {0}\nX-Data : {1}", s.Y, s.X));

I just added above mapping while creating my EnumerableDataSource. And then added the edc to plotter.

plotter.AddLineGraph(
                            edc,
                            new Pen(Brushes.Transparent, 3),
                            new CircleElementPointMarker
                            {
                                Size = 15,
                                Brush = border,
                                Fill = c2
                            },
                            null
                            );

Answer 2

Using the ElementMarkerPointsGraph and CircleElementPointMarker could be very resource expensive. For each Point an Ellipse will be created. Also the Mapping (building the string for Tooltip) will be executed for every point, even if nobody wants to see the tooltip.

So my way is to use a MarkerPointsGraph and set it's Tooltip dynamically.

Xaml:

<d3:MarkerPointsGraph Name="MyMarkerPointsGraph" DataSource="{Binding Values}" ToolTip="Dummy" ToolTipOpening="CircleMarker_OnToolTipOpening">
  <d3:MarkerPointsGraph.Marker>
    <d3:CirclePointMarker />
  </d3:MarkerPointsGraph.Marker>
</d3:MarkerPointsGraph>

and here the Code behind:

private void CircleMarker_OnToolTipOpening(object sender, ToolTipEventArgs e)
{
    var pos = Mouse.GetPosition(MyMarkerPointsGraph);
    var transform = GetTransform(MyMarkerPointsGraph);
    transform.ScreenToData(pos);
    var dataPoint = transform.ScreenToData(pos);

    MyMarkerPointsGraph.ToolTip = $"Y-Data : {dataPoint.Y}\nX-Data : {dataPoint.X}";
}

public static CoordinateTransform GetTransform(PointsGraphBase graph)
{
    if (!(graph.Plotter is Plotter2D))
        return null;
    var transform = ((Plotter2D)graph.Plotter).Viewport.Transform;
    if (graph.DataTransform != null)
        transform = transform.WithDataTransform(graph.DataTransform);

    return transform;
}