Currently, I am working on an existing TypeScript AngularJS project and looking to incorporate d3js. However, due to restrictions with the corporate proxy, I am unable to use tools for downloading or managing dependencies. As a result, I have opted for manually importing the d3js in the index.html file and directly invoking d3 functions from TypeScript without utilizing the d3 TypeScript version.
This means that I will write code like:
var svg = d3.select("svg"),
margin = {top: 20, right: 20, bottom: 30, left: 40},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var x = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.05)
.align(0.1);
However, I encounter compiler errors stating "Cannot find name d3". Is there a way in TypeScript to specify that this JavaScript object is defined externally and should not assume anything about it?
It's frustrating that d3 js is broken down into multiple files. The segmentation of features such as scale and select seems counterintuitive. Who would use d3 scale without select? It lacks coherence in my opinion.