How do I: Chart Data Binding

Sep 21, 2010 at 1:54 PM

Hello, All!

I am new in d3.

I  tried use examples but I didn't find anything about binding.

So, I have in my View d3Chart

also I have data for this chart in such structure:

class DataForChart


  public double StepValue {get; set;}  // X Values

  public int DurationMinutes {get; set;}  // Y Values (Time Axis)


My data is a Step-like

Some like this:





Please, advice me about it.

I'm looking forward to your advices.

If you can - not only for my problem. I need info about binding data in whole too.



Sep 21, 2010 at 7:05 PM

How about something like this....


    public class ModelData
        public double Value { get; set; }
        public TimeSpan Elapsed { get; set; }
        public ModelData(double value, TimeSpan elapsed)
            Value = value;
            Elapsed = elapsed;

    public class SampleModel

        public List<ModelData> Values { get; private set; }

        CompositeDataSource _timeData;
        public CompositeDataSource TimeData
                if (_timeData == null)
                    var xData = new EnumerableDataSource<double>(Values.Select(v => v.Elapsed.TotalSeconds));
                    xData.SetXMapping( x => x );
                    var yData = new EnumerableDataSource<double>(Values.Select(v => v.Value));
                    yData.SetYMapping( y => y );
                    _timeData = xData.Join(yData);
                return _timeData;
        public SampleModel()
            Values = new List<ModelData>();


<Window x:Class="D3Binding.MainWindow"
        Title="MainWindow" Height="350" Width="525">
            <d3:LineGraph DataSource="{Binding Path=TimeData}" Stroke="Black"/>

View code


    public partial class MainWindow : Window
        SampleModel Model { get; set; }

        public MainWindow()

            Model = new SampleModel();
            DataContext = Model;

        void PopulateModel()

            for (int i = 0; i < 10; i++)
                Model.Values.Add(new ModelData((double) i, TimeSpan.FromSeconds(i)));
                Model.Values.Add(new ModelData((double)i, TimeSpan.FromSeconds(i+1)));

This can be done without code in the view but this is a start.


Sep 22, 2010 at 7:33 AM
Edited Sep 22, 2010 at 7:36 AM

Thanks, Grant.

I tried to use your example code.

It seems all work Ok.

Thank you!!

Jan 10, 2011 at 4:27 PM

Just wanted to say thanks Grant, worked great for me as well.

Oct 31, 2013 at 3:41 AM
The Chart Databinding C# tutorial shows a variety way of binding to MS SQL, Oracle, MySQL, Access ODBC as well as XML data, etc.
Nov 4, 2016 at 4:03 AM
The problem with the above approach is each time a new EnumerableSource needs to be created. It doesn't seem to work if ModelData implements INotifyPropertyChanged and only the value changes. This causes lot of issues when you have a large set of points (2000+) updating almost every 500ms-1s. It results in the chart getting messed up when trying to pan/zoom it around. Anyone has faced this before and has a solution?