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