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

【问题标题】：Using Dynamic Data Display (D3) to Generate Graph with Multiple Y Axes使用动态数据显示 (D3) 生成具有多个 Y 轴的图形
【发布时间】：2014-06-16 21:32:54
【问题描述】：

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

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

谢谢你，丰富

【问题讨论】：

标签： c# wpf xaml plot dynamic-data-display

【解决方案1】：

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

【讨论】：