2d visualization笔记(x3) dynamicdatadisplay(sl)(一)

官方
http://research.microsoft.com/en-us/um/cambridge/groups/science/tools/d3/dynamicdatadisplay.htm

Tutorial
http://research.microsoft.com/en-us/um/cambridge/projects/ddd/d3isdk/

D3Overview 必读
http://research.microsoft.com/en-us/um/cambridge/groups/science/tools/d3/D3Overview.pdf

Sliverlight版本: DynamicDataDisplay.2.0.907

Dynamic Data Display 的Sliverlight版本和Wpf版本中的代码不一样.


Tutorial 1: Line graph

xaml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- Copyright © 2010-2011 Microsoft Corporation, All Rights Reserved.
-->
<UserControl x:Class="Tutorial1.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:d3="clr-namespace:Microsoft.Research.DynamicDataDisplay;assembly=DynamicDataDisplay.Silverlight"
mc:Ignorable="d"
d:DesignHeight="300" d:DesignWidth="400">

<Grid x:Name="LayoutRoot" Background="White">
<!-- D3 markup starts here-->
<d3:Chart BottomTitle="Sinc argument" LeftTitle="Sinc value">
<d3:Chart.Title>
<TextBlock HorizontalAlignment="Center" FontSize="14" Margin="0,5,0,5">Tutorial 1: Line graph</TextBlock>
</d3:Chart.Title>
<d3:LineGraph x:Name="linegraph" Description="Sinc graph" Stroke="Blue" StrokeThickness="3"/>
</d3:Chart>
</Grid>
</UserControl>

cs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


using System;
using System.Linq;
using System.Windows.Controls;

namespace
{
public partial class MainPage : UserControl
{
public MainPage()
{
InitializeComponent();

// Compute x array of 1001 points from 0 to 100 with 0.1 step
var x = Enumerable.Range(0, 1001).Select(i => i / 10.0).ToArray();

// Compute y array as sin(x)/x function defined on x grid
var y = x.Select(v => Math.Abs(v) < 1e-10 ? 1 : Math.Sin(v) / v).ToArray();

// Plot data
linegraph.Plot(x, y);
}
}
}


Chart

1
2
3
4
5
6
7
System.Object
System.Windows.DependencyObject
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Control
System.Windows.Controls.ContentControl
Microsoft.Research.DynamicDataDisplay.Chart

LineGraph

1
2
3
4
5
6
7
8
System..Object
System.Windows.DependencyObject
System.Windows.UIElement
System.Windows.FrameworkElement
System.Windows.Controls.Panel
Microsoft.Research.DynamicDataDisplay.PlotBase
Microsoft.Research.DynamicDataDisplay.Plot
Microsoft.Research.DynamicDataDisplay.LineGraph

Line graph uses internally Polyline Silverlight element with attached Plot.Points property. Line graph adds Plot methods, Description
property and legend support to existing Polyline functionality; 是在Polyline(SL内置)的基础上添加了Plot方法, Description(描述)和legend(图例)
——D3Overview

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
public class LineGraph : Plot 
{
...
private Polyline polyline;

/// <summary>
/// Identifies <see cref="P:Microsoft.Research.DynamicDataDisplay.LineGraph.Points" /> dependecy property
/// </summary>
public new static readonly DependencyProperty PointsProperty = DependencyProperty.Register("Points", typeof(PointCollection), typeof(LineGraph), new PropertyMetadata(new PointCollection(), delegate(DependencyObject o, DependencyPropertyChangedEventArgs e)
{
LineGraph lineGraph = (LineGraph)o;
if (lineGraph != null)
{
Microsoft.Research.DynamicDataDisplay.Plot.SetPoints(lineGraph.polyline, (PointCollection)e.get_NewValue());
}
}));

public void Plot(IEnumerable x, IEnumerable y)
{
...
PointCollection pointCollection = new PointCollection();
IEnumerator enumerator = x.GetEnumerator();
IEnumerator enumerator2 = y.GetEnumerator();
...
this.Points = pointCollection;
}

/// <summary>
/// Gets or sets line graph points.
/// </summary>
public PointCollection Points
{
get
{
return (PointCollection)base.GetValue(LineGraph.PointsProperty);
}
set
{
base.SetValue(LineGraph.PointsProperty, value);
}
}


}


变换

与wpf版本中类似
Each plot requires a coordinate transform, actually a composition of data transform and plot transform.

Data transform for a given data element d computes its vertical or horizontal coordinate x or y on plot plane

Plot transform is a transform from plot coordinates to screen coordinates. Plot transform is
always a composition of Translate and Scale transforms, so it is independent along each axis and defined by
four numbers xscale, yscale, xoffset, yoffset

PlotBase是Plot最重要的类
PlotBase is a Silverlight panel that facilitates several tasks:

  • Coordinate transformation between screen and user data
  • AutoFit mode support
  • Management of plot composition and coordinate transforms synchronization

Plot, Figure和Chart

  • LineGraph是Plot
  • Figure class is a panel derived from PlotBase and provides special layout options that are often found in
    charts. It provides attached property Placement that allows to place child elements in center, left, top, right
    and bottom slots
  • Chart element is a prepackaged(预包装) figure with axis, grid lines, legend and title

Figure 更灵活, Chart更方便

1
2
3
4
5
6
7
8
<Grid x:Name="LayoutRoot" Background="White">
<d3:Figure PlotOriginY="-1.5" PlotHeight="3" PlotOriginX="{Binding Value, ElementName=slider, Mode=TwoWay}" PlotWidth="30" IsAutoFitEnabled="False">
<TextBlock d3:Figure.Placement="Top" Text="Axis with ScrollBar sample" TextAlignment="Center" FontSize="14" Margin="5"/>
<d3:LineGraph x:Name="cos" Grid.Row="1"/>
<Slider x:Name="slider" Maximum="100" d3:Figure.Placement="Bottom"/>
<d3:PlotAxis d3:Figure.Placement="Bottom"/>
</d3:Figure>
</Grid>