2

We are trying to use the Microsoft Dynamic Data Display (D3). Using D3 we need multiple LineGraphs in our TimeChartPlotter. So it would be nice to create a binding to a specific collection (e.g. ObservalbleCollection<GraphItem> ) in order to display its items as LineGraphs in the current plotter.

That's why we tried this (but it did not work):

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

Can anyone tell us what's wrong and how to achieve our goal?

pnuts
  • 58,317
  • 11
  • 87
  • 139
myst3rium
  • 154
  • 12
  • @myst3ruin Did you managed to get solution of it ? I have similar situation. I would really appreciate if you could share some help answering yourself below or sending me an email at shekahr.paris@gmail.com – Sss Dec 04 '16 at 23:45
  • @Sss Hi. Since it's been a longe time since I was working with D3 I need to review the code. I'll answer asap. – myst3rium Dec 05 '16 at 20:47

1 Answers1

0

Remarks: We used D3 in Version 0.3.4703.0 (maybe it's fixed now?)

@Sss: We finally used D3's 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"/>

As one can see we used the x:Name-Tag. That's because we had to use Code-Behind to achieve what we needed:

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

By passing the InnerPlotter to the ViewModel we violated the concept of MVVM. But after trying a lot we had no other solution than this.

In our ViewModel we manually add the needed Graphs to the InnerPlotter:

InnerPlotter.AddLineGraph(
    compositeDataSource,
    new Pen(lineBrush, 2),
    desc));

Update 1:

I had a look in the documentation of D3 (http://research.microsoft.com/en-us/um/cambridge/groups/science/tools/d3/D3Overview.pdf)

There on page 8 they describe how to do plot composition:

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

Where on page 9 they describe how to add multiple child plots:

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

I hope this will help.

myst3rium
  • 154
  • 12