使用动态数据显示 (D3) 生成具有多个 Y 轴的图形 [英] Using Dynamic Data Display (D3) to Generate Graph with Multiple Y Axes

问题描述

在过去的一周里，我阅读了很多材料并尝试了很多东西，但我一无所获.

I have read so much material and tried so many things over the past week and I am not getting anywhere with this.

我有一个主窗口 MainWindowView，其中包含如下定义的复选框:

I have a main window MainWindowView which has checkboxes as defined below:

<CheckBox IsChecked="{Binding Path=ocv_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="OCV"/>
<CheckBox IsChecked="{Binding Path=battery_temperature_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="Battery Temperture"/>
<CheckBox IsChecked="{Binding Path=slope_checkbox, Mode=TwoWay}" Margin="0, 0, 0, 2" Content="Slope"/>

根据选中的框，我想在用户单击 Button 时在图形上绘制一条线.我想要相同图表上的所有线条.

Depending on which boxes are checked, I want to plot a line on a graph when the user clicks a Button. I want all lines on the same graph.

问题是，根据点击的框，我可能需要一个额外的轴来绘制.例如，如果我有 3 个复选框 1 2 和 3.数字 1 和 2 的单位是英寸，复选框 3 的单位是加仑.如果所有 3 个都被选中，我将需要左侧(或右侧)英寸的垂直轴和右侧加仑的轴(绘制 3).

The issue is that depending on the box clicked I may need an additional axis to plot on. For example, if I have 3 checkboxes 1 2 and 3. Number 1 and 2 have units of inches and checkbox 3 has units of gallons. If all 3 are checked, I will need a vertical axis for inches on the left (or right) side and an axis for gallons of the right side (to plot 3).

如何使用 D3 以编程方式执行此操作?根本没有太多文档，我需要在网上看到明确的答案.

How do I do that programatically using D3? There is not much documentation at all and I have need seen a clear answer online.

目前我有:

<d3:ChartPlotter Name="plotter" Margin="10,10,20,10">
    <d3:ChartPlotter.HorizontalAxis>
        <d3:HorizontalIntegerAxis Name="dateAxis"/>
    </d3:ChartPlotter.HorizontalAxis>
    <d3:ChartPlotter.VerticalAxis>
        <d3:VerticalIntegerAxis Name="countAxis"/>
    </d3:ChartPlotter.VerticalAxis>

    <d3:Header FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=title}"/>
    <d3:VerticalAxisTitle FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=yAxis}"/>
    <d3:HorizontalAxisTitle FontFamily="Arial" Content="{Binding ElementName=ThisGraphWindowInstance, Path=xAxis}"/>
</d3:ChartPlotter>

在我的 GraphWindowView.xaml 中，它显然只有 2 个轴.如果可能的话，我想使用后面的代码添加一个.

in my GraphWindowView.xaml which obviously only has 2 axes. I would like to add one using the code behind if possible.

谢谢，丰富

推荐答案

如果要添加多个 Y 轴，请选择 InjectedPlotter 对象.对于每种类型的数据(英寸、加仑...)，您都需要一个 InjectedPlotter，将其作为 子项 添加到您的 图表绘图仪.当禁用一种数据的所有行(未选中复选框)时，只需隐藏注入的绘图仪.您必须将每条线与他的正确轴(注入绘图仪)连接起来.

If you want to add multiple Y axis, go for the InjectedPlotter object. Foreach type of data (inch, gallons...), you will need an InjectedPlotter that you add as a children to your chartplotter. When all the lines of one kind of data are disabled (checkboxes unchecked), just hide the injected plotter. You have to link each lines with his correct axis (injected plotter).

这篇关于使用动态数据显示 (D3) 生成具有多个 Y 轴的图形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！