He estado trabajando con D3.js y estoy aprendiendo sobre ello.., hice algunas gráficas simples desde un mismo documento HTML5 con éxito, el problema viene cuando quiero llevar todo el código jasvacript a un archivo javascript e intento instanciar el objeto creado, no presenta ningún error, sin embargo no grafica.
Código Javascript.
function dotChart() {
this.drawChart = function(uri_data) {
d3.json(uri_data, function(error, data){
keys = data.map((o) => {
return Object.keys(o)
}).reduce((prev, curr) => {
return prev.concat(curr)
}).filter((col, i, array) => {
return array.indexOf(col) === i
});
sum = 0;
data.forEach(function(d){
d[keys[1]] = +d[keys[1]]
sum += d[keys[1]];
});
dotChart.X.domain(data.map(function(d){
return d[keys[0]];
}));
dotChart.Y.domain([0, d3.max(data, function(d){
return d[keys[1]]/sum;
})]);
dotChart.SVG.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0, "+ dotChart.HEIGHT + ")")
.call(dotChart.X_AXIS);
dotChart.SVG.append("g")
.attr("class", "y axis")
.call(dotChart.Y_AXIS);
dotChart.SVG.selectAll(".dot")
.data(data)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3)
.attr("cx", function(d){
return dotChart.X(d[keys[0]]) + 13;
})
.attr("cy", function(d){
return dotChart.Y(d[keys[1]]/sum);
})
.attr("fill", "lightblue")
.attr("stroke", "#1A237E");
dotChart.LABELS.append("text")
.attr("transform", "translate(0, "+ dotChart.HEIGHT +")")
.attr("x", (dotChart.WIDTH - dotChart.MARGIN.right))
.attr("dx", "-1.0em")
.attr("dy", "3.0em")
.text("["+ keys[0] +"]");
dotChart.LABELS.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text(keys[1]);
dotChart.TITLE.append("text")
.attr("x", dotChart.WIDTH/2)
.attr("y", -30)
.attr("text-anchor", "middle")
.attr("font-size", "22px")
.text("Memoria Libre (RAM)");
});
}
}
dotChart.MARGIN = {
top: 70,
right: 30,
bottom: 50,
left: 50
}
dotChart.WIDTH = 500 - dotChart.MARGIN.left - dotChart.MARGIN.right,
dotChart.HEIGHT = 300 - dotChart.MARGIN.top - dotChart.MARGIN.bottom;
dotChart.X = d3.scaleLinear().range([dotChart.HEIGHT, 0]);
dotChart.Y = d3.scaleBand().rangeRound([0, dotChart.WIDTH]);
dotChart.FORMAT_PERCENT = d3.format(".0%");
dotChart.X_AXIS = d3.axisBottom()
.scale(dotChart.X);
dotChart.Y_AXIS = d3.axisLeft()
.scale(dotChart.Y)
.ticks(5)
.tickFormat(dotChart.FORMAT_PERCENT);
dotChart.SVG = d3.select("body").append("svg")
.attr("width", dotChart.WIDTH + dotChart.MARGIN.left + dotChart.MARGIN.right)
.attr("height", dotChart.HEIGHT + dotChart.MARGIN.top + dotChart.MARGIN.bottom)
.style("font", "10px verdana")
.append("g")
.attr("transform", "translate("+ dotChart.MARGIN.left +", "+ dotChart.MARGIN.top +")");
dotChart.LABELS = dotChart.SVG.append("g")
.attr("class", "labels");
dotChart.TITLE = dotChart.SVG.append("g")
.attr("class", "title");
Código HTML5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/d3.js"></script>
<script src="dotChart.js"></script>
<style>
.axis path,
.axis line {
fill: none;
stroke: lightgrey;
}
</style>
</head>
<body>
<script type="text/javascript">
var line = new dotChart();
line.drawChart("data_01.json");
</script>
</body>
</html>
Datos
[
{"Country":14,"Income":457.81},
{"Country":15,"Income":4924.5},
{"Country":16,"Income":4792.6},
{"Country":17,"Income": 460.1},
{"Country":18,"Income":4821.7},
{"Country":19,"Income":7601.1},
{"Country":20,"Income": 5267},
{"Country":21,"Income":5006.1},
{"Country":22,"Income":4709.2},
{"Country":23,"Income":7719.2},
{"Country":24,"Income":7754.7},
{"Country":25,"Income":4873.6},
{"Country":26,"Income":4873.6},
{"Country":27,"Income":7754.7},
{"Country":28,"Income":5006.1},
{"Country":29,"Income":5267},
{"Country":30,"Income":4792.6}
]