Using D3 and Knockout: No error, no graph as well

[Abbygale Malaga]

Hi! I am new to D3 and currently, I am working with D3 and Knockout. I have followed everything here. I have made sure that the versions I am using are correct but to no avail, it doesn't return an error. 

Here is my viewmodel: 

define(['durandal/app','knockout', 'plugins/dialog', 
'modules/userservice', 'modules/test', 'd3', 'linegraph'], 
function (app, ko, dialog, userService, test, d3, d3LineGraph) {

var TestModal = function() {

this.example1 = ko.observableArray([2, 1, 2, 3]);
this.complexData = ko.observableArray([
       { position: new Date(2015, 1, 1), value: 10 },
       { position: new Date(2015, 1, 2), value: 8 },
       { position: new Date(2015, 1, 3), value: 12 },
       { position: new Date(2015, 1, 4), value: 13 },
       { position: new Date(2015, 1, 5), value: 11 },
       { position: new Date(2015, 1, 6), value: 7 },
       { position: new Date(2015, 1, 7), value: 5 }
   ]);
}

TestModal.prototype.activate = function() {
    var self = this;
    };
    
    TestModal.prototype.example1Add = function () {
    var self = this;
        var min = 0,
        max = 9,
        randomNumber = Math.random() * (max - min) + min;
   this.example1.push(randomNumber);
   this.complexData.push({ position: new Date(2015, 1, this.complexData().length + 1), value: randomNumber });
    }
    
    
return TestModal;
});

Here is my html:

<div class="exampleContainer">
       <p>
           This example renders an observable array as a graph.
       </p>
       <div>
           <button data-bind="click: example1Add">
               Add a random number between 0 and 9
           </button>
       </div>
       <div id="Example1" class="example"
            data-bind="d3LineGraph: example1"></div>
   </div>

 

And here is my knockout-d3-line-graph.js which is defined as linegraph in my main.js. 

define(['knockout', 'd3'],
(function (root, factory) {
if (typeof exports === 'object') {
module.exports = factory(require('knockout'), require('d3'));
} else if (typeof define === 'function' && define.amd) {
define(['knockout', 'd3'], factory);
} else {
factory(ko, d3);
}
}(this, function (ko, d3) {
function getPaintingMethods(data, element, options) {
var elementRect = element.getBoundingClientRect(),
padding = options.padding(),
width = elementRect.width - padding.left - padding.right,
height = elementRect.height - padding.top - padding.bottom,
scalerX = options.xScale().domain(d3.extent(data, options.x)).range([0, width]),
scalerY = options.yScale().domain(d3.extent(data, options.y)).range([height, 0]);
return {
line: d3.svg.line().interpolate('basis')
.x(function (d, i) { return scalerX(options.x(d, i)); })
.y(function (d) { return scalerY(options.y(d)); }),
area: d3.svg.area().interpolate('basis')
.x(function (d, i) { return scalerX(options.x(d, i)); })
.y0(height)
.y1(function (d) { return scalerY(options.y(d)); }),
scaleX: scalerX,
scaleY: scalerY
};
}

ko.bindingHandlers.d3LineGraph = {
init: function (element, valueAccessor, allBindings) {
var options = {};
ko.utils.extend(options, ko.bindingHandlers.d3LineGraph.options);
ko.utils.extend(options, allBindings.get('d3LineGraph'));
var bindingContext = ko.utils.unwrapObservable(valueAccessor());
var elementRect = element.getBoundingClientRect();
var data = bindingContext.value ? bindingContext.value() : bindingContext;
var padding = options.padding();
var shapes = getPaintingMethods(data, element, options);
var svg = d3.select(element).append('svg');
svg.attr('width', elementRect.width)
  .attr('height', elementRect.height);
var plot = svg.append("g")
 .attr("class", "plot")
 .attr("width", elementRect.width - padding.left - padding.right + 1)
 .attr("height", elementRect.height - padding.top - padding.bottom + 1)
 .attr("transform", "translate(" + (padding.left + 1) + "," + (padding.top - 1) + ")");
plot.append("rect").attr("class", "bg").attr("width", elementRect.width - padding.left - padding.right)
 .attr("height", elementRect.height - padding.top - padding.bottom)
 .attr("fill", "none");
plot.append('path').attr('class', 'area').attr('d', shapes.area(data));
plot.append('path').attr('class', 'path').attr('d', shapes.line(data));
if (options.showAxes) {
var xAxis = d3.svg.axis()
 .scale(shapes.scaleX)
 .orient("bottom");
svg.append("g")
 .attr("class", "x axis")
 .attr("transform", "translate(" + padding.left + "," + (elementRect.height - padding.bottom) + ")")
 .call(xAxis);
var yAxis = d3.svg.axis()
 .scale(shapes.scaleY)
 .orient("left");
svg.append("g")
 .attr("class", "y axis")
 .attr("transform", "translate(" + padding.left + "," + padding.top + ")")
 .call(yAxis);
}
},
update: function (element, valueAccessor, allBindings) {
var options = {};
ko.utils.extend(options, ko.bindingHandlers.d3LineGraph.options);
ko.utils.extend(options, allBindings.get('d3LineGraph'));
var bindingContext = ko.utils.unwrapObservable(valueAccessor());
var data = bindingContext.value ? bindingContext.value() : bindingContext;
var shapes = getPaintingMethods(data, element, options);
var svg = d3.select(element).select('svg');
if (options.showAxes) {
var xAxis = d3.svg.axis()
 .scale(shapes.scaleX)
 .orient("bottom");
options.xAxisOptions(xAxis);
svg.select("g.x")
 .interrupt()
 .transition()
 .ease('linear')
 .duration(250)
 .call(xAxis);
var yAxis = d3.svg.axis()
 .scale(shapes.scaleY)
 .orient("left");
options.yAxisOptions(yAxis);
svg.select("g.y")
 .interrupt()
 .transition()
 .ease('linear')
 .duration(250)
 .call(yAxis);
}
svg.select('path.area')
  .interrupt()
  .transition()
  .ease('linear')
  .duration(250)
  .attr('d', shapes.area(data));
svg.select('path.path')
  .interrupt()
  .transition()
  .ease('linear')
  .duration(250)
  .attr('d', shapes.line(data));
},
options: {
  showAxes: false,
  padding: function () {
  return this.showAxes ? { top: 15, right: 20, left: 40, bottom: 25 } : { top: 0, right: 0, left: 0, bottom: 0 };
  },
  x: function (d, i) { return i; },
  y: function (d) { return d; },
  xScale: d3.scale.linear,
  yScale: d3.scale.linear,
  xAxisOptions: function (axis) { },
  yAxisOptions: function (axis) { }
}
};
return ko.bindingHandlers.d3LineGraph;
})));