How to make the X axis shared for 2 charts in WPF in D3?

Question

I want to place 2 charts one under the another one. And I want them to have shared X axis. So when I move the upper chart the lower one moves too, the same for zoom. I found that it is implemented in Dynamic Data Display lib for Silverlight. And is implemented very good. Here you can see the implementation. "Synchronized figures". I want the same. How can I do it?

Answer 1

Ok. I've found the solution. It works a little wrong, but it's ok. If you want to have shared X axis, you have to do next:

// Add handler
        SpeedChart.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);


// Respond to changes
        void Viewport_PropertyChanged(object sender, ExtendedPropertyChangedEventArgs e)
        {
            if (e.PropertyName == "Visible")
            {
                StrokeChart.Viewport.Visible = new DataRect(SpeedChart.Viewport.Visible.XMin, StrokeChart.Viewport.Visible.YMin, SpeedChart.Viewport.Visible.Width, StrokeChart.Viewport.Visible.Height);
            }
        }

Next you have to remove MouseNavigation and HorizontalAxisNavigation from StrokeChart. The problem is that the points on StrokeChart are not visible at first, because the range on Y axis is wrong. But you can zoom and drag the Y axis only for getting the proper values. If you know how to solve the problem with ranges please let me know. Thanks

Answer 2

void Viewport_PropertyChanged(object sender, ExtendedPropertyChangedEventArgs e)
{
    if (e.PropertyName == "Visible")
    {
        if((sender as Viewport2D).Plotter==plotter)
            plotter2.Viewport.Visible = new DataRect(plotter.Viewport.Visible.XMin, plotter2.Viewport.Visible.YMin, plotter.Viewport.Visible.Width, plotter2.Viewport.Visible.Height);
        else if ((sender as Viewport2D).Plotter == plotter2)
                plotter.Viewport.Visible = new DataRect(plotter2.Viewport.Visible.XMin, plotter.Viewport.Visible.YMin, plotter2.Viewport.Visible.Width, plotter.Viewport.Visible.Height);
    }
}


private void Window1_Loaded(object sender, RoutedEventArgs e)
{
    // Add handler
    plotter.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);
    plotter2.Viewport.PropertyChanged += new EventHandler<ExtendedPropertyChangedEventArgs>(Viewport_PropertyChanged);
}

Full connection of the two graphs. Supplement to the previous text.