c# - 动态数据展示(D3)——生成多图

Question

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

这就是我们尝试这个的原因(但它没有用):

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

谁能告诉我们哪里出了问题以及如何实现我们的目标？

Answer 1

备注:我们在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。那是因为我们必须使用代码隐藏来实现我们需要的:

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>

---

希望对您有所帮助。