动态数据显示(D3) -生成多个图形

本文关键字：图形 -生 数据 显示 D3 动态 | 更新日期: 2023-09-27 18:09:14

我们正在尝试使用微软动态数据显示(D3)。使用D3，我们需要多个线形图在我们的时间图表。因此，最好为特定集合(例如ObservalbleCollection<GraphItem>)创建绑定，以便在当前绘图仪中将其项目显示为LineGraphs。

这就是为什么我们尝试了这个(但它没有工作):

<d3:TimeChartPlotter Content="{Binding OurCollection}">
   <d3:TimeChartPlotter.ContentTemplate>
       <DataTemplate DataType="GraphItem">
           <d3:LineGraph DataSource="{Binding Path=GraphData}" ... />
       </DataTemplate>
   </d3:TimeChartPlotter.ContentTemplate>
   <d3:Header ... />
   <d3:VerticalAxisTitle... />
   <d3:HorizontalAxisTitle... />
</d3:TimeChartPlotter>

谁能告诉我们出了什么问题以及如何实现我们的目标?

动态数据显示(D3) -生成多个图形

备注:我们在0.3.4703.0版本中使用D3(也许现在已经修复了?)

@Sss:我们最终使用了D3的InjectedPlotter:

<d3:InjectedPlotter x:Name="InnerPlotter" SetViewportBinding="False">
    <d3:VerticalAxis Placement="Right"/>
    <d3:VerticalAxisTitle Content="Qualitaet" Placement="Right"/>
</d3:InjectedPlotter>
<d3:AxisNavigation Placement="Bottom"/>
<d3:AxisNavigation Placement="Right"/>
<d3:VerticalAxisTitle Content="Werte" Placement="Left"/>
<d3:HorizontalAxisTitle Content="Zeitpunkte" Placement="Bottom"/>

可以看到我们使用了x:Name -Tag。这是因为我们必须使用Code-Behind来实现我们需要的东西:

private void OnViewLoaded(object sender, RoutedEventArgs e)
{
    // Passing Plotter to ViewModel
    ViewModel.InnerPlotter = InnerPlotter;
    Plotter.Viewport.PropertyChanged += Viewport_PropertyChanged;
}
private void Viewport_PropertyChanged(object sender, ExtendedPropertyChangedEventArgs e)
{
    // Update Viewport of Inner Plotter
    InnerPlotter.Viewport.Visible = new DataRect(
        Plotter.Viewport.Visible.XMin,
        InnerPlotter.Viewport.Visible.YMin,
        Plotter.Viewport.Visible.Width,
        InnerPlotter.Viewport.Visible.Height
        );
}

通过将InnerPlotter传递给ViewModel，我们违反了MVVM的概念。但经过多次尝试，我们没有其他的解决方案。

在我们的ViewModel中，我们手动添加所需的图形到InnerPlotter:

InnerPlotter.AddLineGraph(
    compositeDataSource,
    new Pen(lineBrush, 2),
    desc));
更新1:

我看了一下D3的文档(http://research.microsoft.com/en-us/um/cambridge/groups/science/tools/d3/D3Overview.pdf)

在第8页，他们描述了如何做情节组成:

<d3:Chart>
    <d3:Plot>
        <d3:ErrorBarGraph ... />
        <d3:CircleMarkerGraph ... />
    </d3:Plot>
 </d3:Chart>

在第9页他们描述了如何添加多个子情节:

<d3:Chart>
    <Grid>
        <d3:ErrorBarGraph ... />
        <d3:CircleMarkerGraph ... />
    </Grid>
</d3:Chart>
相关文章：