在 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 颜色从灰色更改为白色?

D3线图显示正数和负数

带有序数轴和 json 数据的 JavaScript d3 折线图

WPF 动态模拟CPU 使用率曲线图

D3.js 世界地图(一)投影方式