在 WPF 中使用 D3 创建等值线图
Posted
技术标签:
【中文标题】在 WPF 中使用 D3 创建等值线图【英文标题】:Creating isoline graph with D3 in WPF 【发布时间】:2016-01-31 14:30:56 【问题描述】:我正在尝试使用 D3 的等值线图从一组数据中显示等高线图,其中每个像素都有 X、Y 和强度。 到目前为止,我从仅筛选库中收集到的是 Isolinegraph 的 DataSource 属性是 IDataSource2D(Double)。 所以我在代码中创建了一个,但我不知道如何用任何数据填充它。 如果有人在 WPF 下成功使用了 D3 的 Isolinegraph,我将不胜感激。 我已经搜索了好几个小时,但我能找到的只是 3 年前来自“CX Gamer”的帖子,但似乎他不再有问题的代码了。 提前感谢您的帮助。
弗朗西斯。
【问题讨论】:
【参考方案1】:弗朗西斯,
我查看了 Dynamic Data Display 库,并从示例中获得灵感来实现这一目标
1.用 XAML 描述图形
<Grid>
<d3:ChartPlotter Name="plotter">
<!--to display the isolines-->
<d3:IsolineGraph Name="isolineGraph"/>
<!--to dynamically display the isocurve just under mouse cursor-->
<d3:IsolineTrackingGraph Name="trackingGraph"/>
<!--to show x and y coordinates-->
<d3:CursorCoordinateGraph/>
</d3:ChartPlotter>
</Grid>
2。在 C# 中提供一些数据
public MainWindow()
InitializeComponent();
const int width=100;
const int height=100;
double[,] data = new double[width, height];
for (int row = 0; row < height; row++)
for (int column = 0; column < width; column++)
data[column, row] = Math.Cos(2.0*Math.PI*column /(width-1) )*
Math.Cos(2.0 * Math.PI * row / (height - 1));
Point[,] gridData = new Point[width, height];
for (int row = 0; row < height; row++)
for (int column = 0; column < width; column++)
gridData[column, row] = new Point(row, column);
// Create data source
WarpedDataSource2D<double> dataSource = new WarpedDataSource2D<double>(data, gridData);
isolineGraph.DataSource = dataSource;
trackingGraph.DataSource = dataSource;
Rect visible = new Rect(dataSource.Grid.GetLowerBound(0), dataSource.Grid.GetLowerBound(1),
dataSource.Grid.GetUpperBound(0), dataSource.Grid.GetUpperBound(1));
plotter.Viewport.Visible = visible;
我提供的代码计算一个函数,其值取决于 x 和 y。
我将计算出的(余弦)值放入 data
变量中
gridData
变量只保存 x,y 点
这是完整的工作项目:http://1drv.ms/1P2TGmO
问候
【讨论】:
嗨,Emmanuel,我也在调查那个“WarpedDataSource2D”...非常感谢这个例子!我会努力实现的。 弗朗西斯,你有时间试试吗?清楚了吗?【参考方案2】:我试过了,效果很好。 我只需要修改您的示例以使其适用于矩形案例(宽度不等于高度),因为 gridData 分配中存在反转:
gridData[column, row] = new Point(row, column)
改为
gridData[column, row] = new Point(column, row)
这似乎做到了。 可悲的是,我认为 D3 等值线中没有办法用颜色填充地图,就像在热图或 contour plot of CHartDirector 中一样(这是我在 WinForms 上使用的库,但它在 WPF 中不起作用)。 所以我现在正在研究 Oxyplot。 非常感谢您的帮助。
弗朗西斯。
【讨论】:
以上是关于在 WPF 中使用 D3 创建等值线图的主要内容,如果未能解决你的问题,请参考以下文章
如何在 ggplot 等值线图中将 NA 颜色从灰色更改为白色?