Wie füge ich einen Marker an einem bestimmten Punkt in einem Dynamic Data Display Plot hinzu?

Question

Ich verwende ein Diagramm der dynamischen Datenanzeige (v0.4) und ich möchte eine Kreismarkierung an einem bestimmten Datenpunkt der Reihe hinzufügen, um die Position des Maximalwerts der Darstellung hervorzuheben.

Unter Berücksichtigung der sehr geringen Menge an Dokumentation und Beispielen von den Entwicklern von Dynamic Data Display, weiß jemand weiß, wie man einen Marker an einem bestimmten Punkt hinzufügen?

UPDATE

Seit v0.4 nicht d3:CircleMarkerGraph hat, und ich würde diese Version gerne anstelle von v0.3 verwenden (Zurücksetzen auch Code Anpassung erfordert), habe ich folgendes versucht:

Ausblick:

<d3:ChartPlotter x:Name="spectrumPlot" /> 
    <d3:LineGraph x:Name="spectrumLineGraph" DataSource="{Binding SpectrumPlotData}"/> 
    <d3:MarkerPointsGraph x:Name="spectrumMarkers" DataSource="{Binding SpectrumMarkersData}" /> 
</d3:ChartPlotter> 

Ansichtsmodell:

private IPointDataSource _spectrumMarkersData; 
    public IPointDataSource SpectrumMarkersData 
    { 
     get { return _spectrumMarkersData; } 
     set 
     { 
      _spectrumMarkersData = value; 
      OnPropertyChanged("SpectrumMarkersData"); 
     } 
    } 

private void UpdatePlotData() 
    { 
     EnumerableDataSource<double> xDataSource, yDataSource; 
     xDataSource = new EnumerableDataSource<double>(SignalProcessor.Instance.GetXAxisSpectrum()); xDataSource.SetXMapping(X => X); 
     yDataSource = new EnumerableDataSource<double>(SignalProcessor.Instance.GetYAxisSpectrum()); yDataSource.SetYMapping(Y => Y); 
     SpectrumPlotData = new CompositeDataSource(xDataSource, yDataSource); 
     SpectrumMarkersData = new CompositeDataSource(xDataSource, yDataSource); 
    } 

Ich würde eine Markierung an jedem Punkt in der Spektrumsdarstellung erwarten, aber keine erscheint. Weiß jemand, was ich falsch mache?

Answer 1

In der online tutorial für die Silverlight-Version, in der Zeichnung mehrere Grafiken Abschnitt, verwenden sie eine zweite Grafik, um bestimmte Elemente zu markieren. Das heißt, die Markierungen werden dem Diagramm als zweites Diagramm überlagert.

Die WPF-Version, die Sie in Quellform von CodePlex herunterladen können (die neueste Version zum Herunterladen ist v0.3), stellt nicht die gleichen Objekte oder Namespaces wie die Silverlight-Version zur Verfügung.

Unter der Annahme einer einfachen Liste von Datenpunkten, wobei die X-Koordinate der Index des Elements im Array ist. Die Markierungen verwenden Point Objekte zum Zuordnen und X-Index zu einem Punkt Y-Wert. Dies bedeutet, dass Sie nicht für jedes Element im Datensatz eine Markierung benötigen. Sie müssen die GetDataPoints() und GetMarkPoints() selbst implementieren, oder verwenden Sie alle Sammlungen, die Sie bereits haben.

C# -Code-behind Beispiel:

public partial class GraphView : UserControl 
{ 
    public GraphView() 
    { 
     InitializeComponent(); 

     // Get the data and mark points. 
     double dataPoints[] = GetDataPoints(); 
     Point markPoints[] = GetMarkPoints(); 

     // Plot the data. 
     line.Plot(dataPoints); 

     // Plot the markers. 
     markers.Plot(markPoints); 
    } 
} 

und die (Silverlight) XAML:

<UserControl x:Class="GraphView" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d3="clr-namespace:Microsoft.Research.DynamicDataDisplay;assembly=DynamicDataDisplay.Silverlight" 
    mc:Ignorable="d" 
    d:DesignHeight="300" d:DesignWidth="400"> 

    <Grid x:Name="LayoutRoot" Background="White"> 
     <d3:Chart> 
      <Grid> 
       <!-- Plot line graph --> 
       <d3:LineGraph Name="line" 
           Description="Actual data" 
           Stroke="Green"/>     
       <!-- Plot additional points over line graph --> 
       <d3:CircleMarkerGraph Name="markers" 
             Description="Interesting points" 
             Size="5" Color="Black"/> 
      </Grid> 
     </d3:Chart> 
    </Grid> 
</UserControl>