在 WPF 中使用 D3 创建等值线图答案

【问题标题】：Creating isoline graph with D3 in WPF在 WPF 中使用 D3 创建等值线图
【发布时间】：2016-01-31 14:30:56
【问题描述】：

我正在尝试使用 D3 的等值线图从一组数据中显示等高线图，其中每个像素都有 X、Y 和强度。到目前为止，我从仅筛选库中收集到的是 Isolinegraph 的 DataSource 属性是 IDataSource2D（Double）。所以我在代码中创建了一个，但我不知道如何用任何数据填充它。如果有人在 WPF 下成功使用了 D3 的 Isolinegraph，我将不胜感激。我已经搜索了好几个小时，但我能找到的只是 3 年前来自“CX Gamer”的帖子，但似乎他不再有问题的代码了。提前感谢您的帮助。

弗朗西斯。

【问题讨论】：

标签： wpf xaml dynamic-data-display

【解决方案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。非常感谢您的帮助。

弗朗西斯。

【讨论】：