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

Are you asking about the tooltip for the `CircleElementPointMarker` or for the line? If you're asking about the line, I can say that I've looked for this for a while; I don't think it's supported in the current (very old) version. There are updated versions for Silverlight that might do this, I haven't explored that much. — klugerama, Feb 10 '14 at 17:00

score 1 · Accepted Answer · answered Feb 11 '14 at 09:49

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
                            );

score 0 · Answer 2 · answered Dec 29 '15 at 12:01

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;
}

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

2 Answers2