使用动态数据显示(D3)生成具有多个Y轴的图形

Question

在过去的一周里，我读了很多材料，尝试了很多东西，但我没有任何进展。

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

<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时在图形上绘制一条线。我想在相同的图形上的所有行。

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

我如何使用D3编程?没有太多的文档，我需要在网上看到一个明确的答案。

目前我有:

<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个轴。如果可能的话，我想使用后面的代码添加一个。

谢谢你,丰富的

Answer 1

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