如何在动态数据显示图中的特定点添加标记?

Posted

技术标签:

【中文标题】如何在动态数据显示图中的特定点添加标记?【英文标题】:How to add a marker at a specific point in a Dynamic Data Display plot? 【发布时间】:2016-09-12 07:35:03 【问题描述】:

我正在使用动态数据显示 (v0.4) 绘图,我想在系列的特定数据点添加一个圆形标记,以突出显示绘图最大值的位置。

考虑到动态数据显示开发人员提供的极少量文档和示例,有人知道如何在特定点添加标记吗?

更新

由于 v0.4 没有 d3:CircleMarkerGraph 并且我想使用这个版本而不是 v0.3(还原也需要代码调整),我尝试了以下方法:

查看:

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

视图模型:

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

我希望在频谱图中的每个点都有一个标记,但没有出现。 有人知道我做错了什么吗?

【问题讨论】:

【参考方案1】:

在 Silverlight 版本的 online tutorial 中,在绘制多个图形部分,他们使用第二个绘图来标记特定项目。也就是说,标记作为第二个图叠加在图表上。

您可以从 CodePlex 以源代码形式下载 WPF 版本(最新的可下载版本是 v0.3),它不公开与 Silverlight 版本相同的对象或命名空间。

假设一个简单的数据点列表,其中 X 坐标是数组中项目的索引。标记使用 Point 对象映射和 X 索引到点 Y 值。这样您就不需要为数据集中的每个项目都设置一个标记。您需要自己实现GetDataPoints()GetMarkPoints(),或者使用您已有的任何集合。

C# 代码隐藏示例:

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

还有(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>

【讨论】:

感谢您提供此解决方案。但是在恢复到 v0.3 之前,我想进一步尝试 v0.4。请检查我更新的问题。

以上是关于如何在动态数据显示图中的特定点添加标记?的主要内容,如果未能解决你的问题,请参考以下文章

map组件的标记点上添加的单击事件名是啥

Plotly:如何在绘图线图中的特定点添加标记(python / pandas)

将列动态添加到数据网格或使用列表中的特定列生成数据网格

如何使用javascript从数据库中向动态表中添加不同的列

处理 GraphQL 模式中的动态元素

gridview如何动态添加列,如何在添加列后显示数据