Can't insert a d3 chart on a bootstrap div
css, d3.js, html, javascript, jquery
Solution
You must declare your div before you call the script. Put the script after it or encapsulate it in a function and call it on load.
<!DOCTYPE html>
<html>
<head>
<title>Linee1</title>
<meta charset="utf-8">
<script type="text/javascript" src="d3/d3.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/jquery.min.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="chartline1" ></div>
</body>
<script>
var margin = {top: 130, right: 40, bottom: 45, left: 150},
width = 1000 - margin.left - margin.right,
height = 505 - margin.top - margin.bottom;
var parseDate = d3.time.format("%d-%b-%y").parse;
var formatTime = d3.time.format("%e %B");
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);
var yAxis = d3.svg.axis().scale(y)
.orient("left").ticks(3);
var valueline = d3.svg.line()
.interpolate("linear-open")
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });
var valueline2 = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.open); });
var div = d3.select("#chartline1").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var chart1 = d3.select("#chartline1")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
function make_x_axis() {
return d3.svg.axis()
.scale(x)
.orient("bottom")
.ticks(5)
}
function make_y_axis() {
return d3.svg.axis()
.scale(y)
.orient("left")
.ticks(3)
}
// Get the data
d3.tsv("data/data2.tsv", function(error, data) {
data.forEach(function(d) {
d.date = parseDate(d.date);
d.close = +d.close;
d.open = +d.open;
});
// Scale the range of the data
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return Math.max(d.close, `d.open); })]);`
//grid
chart1.append("g")
.attr("class", "grid")
.attr("transform", "translate(0," + height + ")")
.call(make_x_axis()
.tickSize(-height, 0, 0)
.tickFormat("")
)
chart1.append("g")
.attr("class", "grid")
.call(make_y_axis()
.tickSize(-width, 0, 0)
.tickFormat("")
)
chart1.append("g") // Add the X Axis
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis)
.style("font-size", "12px") ;
chart1.append("text") // text label for the x axis
.attr("transform",
"translate(" + (width/2) + " ," + (height+margin.bottom-3) + ")")
.style("text-anchor", "middle")
.text("Tempo");
chart1.append("g") // Add the Y Axis
.attr("class", "y axis")
.call(yAxis)
.style("font-size", "12px");
chart1.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 70 - margin.left)
.attr("x",0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Valore");
chart1.append("path")
.attr("class", "line")
.attr("d", valueline(data))
.style("stroke-width", 5);
chart1.append("path")
.attr("class", "line")
.style("stroke", "#6f6f6f")
.attr("d", valueline2(data))
.style("stroke-width", 5);
;
//tooltip line 1
chart1.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5.5)
.style("fill", "#fff8ee")
.style("opacity", 1) // set the element opacity
.style("stroke", "#f93") // set the line colour
.style("stroke-width", 3.5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); })
.on("mouseover", function(d) {
d3.select(this).attr("r", 8).style("fill", "#f93").style("opacity", 1) ;
div.transition()
.duration(70)
.style("opacity", .8)
;
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 64) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "#fff8ee");
div.transition()
.duration(200)
.style("opacity", 0) });
//tooltio line2
chart1.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 5.5)
.style("fill", "#fff8ee")
.style("opacity", 1) // set the element opacity
.style("stroke", "#6f6f6f") // set the line colour
.style("stroke-width", 3.5)
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.open); })
.on("mouseover", function(d) {
d3.select(this).attr("r", 8).style("fill", "#6f6f6f").style("opacity", 1) ; //il punto cambia al mousover (bellissmo)
div.transition()
.duration(70)
.style("opacity", .7)
.style("border", "1px");
div .html(formatTime(d.date) + "<br/>" + d.close)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 64) + "px");
})
.on("mouseout", function(d) {
d3.select(this).attr("r", 5.5).style("fill", "#fff8ee");
div.transition()
.duration(200)
.style("opacity", 0);
});
//title
chart1.append("text")
.attr("x", (width / 6))
.attr("y", 0 - (margin.top / 2))
.attr("text-anchor", "middle")
.style("font-size", "20px")
.style("text-decoration", "none")
.text("Modello 1: Serie (pochi dati) ");
});
</script>
</html>
Problem
I need to put a d3 chart on a HTML div using bootstrap but I can't. I managed to attach it on body, but I don't know why I cant inside a div. I'm using a code like this for the script: ``` var chart1 = d3.select("#chart1") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") ``` and a simple way for html: ``` <div id="chartline1"></div> ``` Here is all the code: ``` <!DOCTYPE html> <html> <head> <title>Linee1</title> </head> <meta charset="utf-8"> <body> <script type="text/javascript" src="d3/d3.js"></script> <script src="js/bootstrap.js"></script> <script src="js/jquery.min.js"></script> <link rel="stylesheet" href="css/style.css"> <script> var margin = {top: 130, right: 40, bottom: 45, left: 150}, width = 1000 - margin.left - margin.right, height = 505 - margin.top - margin.bottom; var parseDate = d3.time.format("%d-%b-%y").parse; var formatTime = d3.time.format("%e %B"); var x = d3.time.scale().range([0, width]); var y = d3.scale.linear().range([height, 0]); var xAxis = d3.svg.axis().scale(x) .orient("bottom").ticks(5); var yAxis = d3.svg.axis().scale(y) .orient("left").ticks(3); var valueline = d3.svg.line() .interpolate("linear-open") .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.close); }); var valueline2 = d3.svg.line() .x(function(d) { return x(d.date); }) .y(function(d) { return y(d.open); }); var div = d3.select("#chartline1").append("div") .attr("class", "tooltip") .style("opacity", 0); var chart1 = d3.select("#chartline1") .append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); function make_x_axis() { return d3.svg.axis() .scale(x) .orient("bottom") .ticks(5) } function make_y_axis() { return d3.svg.axis() .scale(y) .orient("left") .ticks(3) } // Get the data d3.tsv("data/data2.tsv", function(error, data) { data.forEach(function(d) { d.date = parseDate(d.date); d.close = +d.close; d.open = +d.open; }); // Scale the range of the data x.domain(d3.extent(data, function(d) { return d.date; })); y.domain([0, d3.max(data, function(d) { return Math.max(d.close, `d.open); })]);` //grid chart1.append("g") .attr("class", "grid") .attr("transform", "translate(0," + height + ")") .call(make_x_axis() .tickSize(-height, 0, 0) .tickFormat("") ) chart1.append("g") .attr("class", "grid") .call(make_y_axis() .tickSize(-width, 0, 0) .tickFormat("") ) chart1.append("g") // Add the X Axis .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis) .style("font-size", "12px") ; chart1.append("text") // text label for the x axis .attr("transform", "translate(" + (width/2) + " ," + (height+margin.bottom-3) + ")") .style("text-anchor", "middle") .text("Tempo"); chart1.append("g") // Add the Y Axis .attr("class", "y axis") .call(yAxis) .style("font-size", "12px"); chart1.append("text") .attr("transform", "rotate(-90)") .attr("y", 70 - margin.left) .attr("x",0 - (height / 2)) .attr("dy", "1em") .style("text-anchor", "middle") .text("Valore"); chart1.append("path") .attr("class", "line") .attr("d", valueline(data)) .style("stroke-width", 5); chart1.append("path") .attr("class", "line") .style("stroke", "#6f6f6f") .attr("d", valueline2(data)) .style("stroke-width", 5); ; //tooltip line 1 chart1.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 5.5) .style("fill", "#fff8ee") .style("opacity", 1) // set the element opacity .style("stroke", "#f93") // set the line colour .style("stroke-width", 3.5) .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.close); }) .on("mouseover", function(d) { d3.select(this).attr("r", 8).style("fill", "#f93").style("opacity", 1) ; div.transition() .duration(70) .style("opacity", .8) ; div .html(formatTime(d.date) + "<br/>" + d.close) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 64) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("r", 5.5).style("fill", "#fff8ee"); div.transition() .duration(200) .style("opacity", 0) }); //tooltio line2 chart1.selectAll("dot") .data(data) .enter().append("circle") .attr("r", 5.5) .style("fill", "#fff8ee") .style("opacity", 1) // set the element opacity .style("stroke", "#6f6f6f") // set the line colour .style("stroke-width", 3.5) .attr("cx", function(d) { return x(d.date); }) .attr("cy", function(d) { return y(d.open); }) .on("mouseover", function(d) { d3.select(this).attr("r", 8).style("fill", "#6f6f6f").style("opacity", 1) ; //il punto cambia al mousover (bellissmo) div.transition() .duration(70) .style("opacity", .7) .style("border", "1px"); div .html(formatTime(d.date) + "<br/>" + d.close) .style("left", (d3.event.pageX) + "px") .style("top", (d3.event.pageY - 64) + "px"); }) .on("mouseout", function(d) { d3.select(this).attr("r", 5.5).style("fill", "#fff8ee"); div.transition() .duration(200) .style("opacity", 0); }); //title chart1.append("text") .attr("x", (width / 6)) .attr("y", 0 - (margin.top / 2)) .attr("text-anchor", "middle") .style("font-size", "20px") .style("text-decoration", "none") .text("Modello 1: Serie (pochi dati) "); }); </script> <div id="chartline1" ></div> </body> </html> ```