2

我们正在尝试使用 Microsoft 动态数据显示 (D3)。使用 D3，我们需要在 TimeChartPlotter 中使用多个 LineGraph。因此，最好创建与特定集合（例如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>

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

4

1 回答 1

0

备注：我们在 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 中，我们手动将所需的 Graphs 添加到 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>

我希望这将有所帮助。

于 2016-12-07T13:57:57.820 回答