更新1：

Question

我们正在尝试使用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>

谁能告诉我们什么是错的以及如何实现我们的目标？

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 - 标签。那是因为我们必须使用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>

我希望这会有所帮助。

动态数据显示（D3） - 生成多个图形

1 个答案:

更新1：