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.

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"/>

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.

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).

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

Currently I have:

<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>

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

Thank you, Rich

回答1:

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).

来源：https://stackoverflow.com/questions/24252589/using-dynamic-data-display-d3-to-generate-graph-with-multiple-y-axes

标签

wpf

xaml

plot

dynamic-data-display