Menu
Before adding the d3.tip method into the codes, the bar chart will appear. However, after adding in the d3.tip method, nothing is displayed and this error is shown in the console. How do I solve this problem and add in the d3.tip into my bar chart? Uncaught TypeError: Object # has no method 'tip'
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.y.axisRight text {
fill: orange;
}
.y.axisLeft text {
fill: steelblue;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.bar1 {
fill: steelblue;
}
.bar2 {
fill: orange;
}
.x.axis path {
display: black;
}
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 12px;
background: rgba(0, 0, 0, 0.8);
color: #fff;
border-radius: 2px;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
box-sizing: border-box;
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: rgba(0, 0, 0, 0.8);
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 80, right: 80, bottom: 80, left: 80},
width = 400 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y0 = d3.scale.linear().domain([100,500]).range([height, 0]),
y1 = d3.scale.linear().domain([500,1000]).range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
// create left yAxis
var yAxisLeft = d3.svg.axis().scale(y0).ticks(5).orient("left");
// create right yAxis
var yAxisRight = d3.svg.axis().scale(y1).orient("right");
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {
return "<strong>Health Workers:</strong> <span style='color:red'>" + d.totalhealthworkers + "</span>";
})
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("class", "graph")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
svg.call(tip);
d3.json("workforce.json", function(error, data) {
x.domain(data.map(function(d) { return d.countryName; }));
y0.domain([0, d3.max(data, function (d) { return d.totalhealthworkers; })]);
y1.domain([0, d3.max(data, function (d) { return d.totalhealthfacilities; })]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis axisLeft")
.attr("transform", "translate(0,0)")
.call(yAxisLeft)
.append("text")
.attr("y", 35)
.attr("dy", "-2em")
.attr("transform", "rotate(-90)")
.style("text-anchor", "end")
.text("Total health workers per 100,000 people");
svg.append("g")
.attr("class", "y axis axisRight")
.attr("transform", "translate(" + (width) + ",0)")
.call(yAxisRight)
.append("text")
.attr("y", 15)
.attr("x", -20)
.attr("transform", "rotate(-90)")
.attr("dy", "-2em")
.attr("dx", "2em")
.style("text-anchor", "end")
.text("Total health facilities per 100,000 people");
bars = svg.selectAll(".bar").data(data).enter();
bars.append("rect")
.attr("class", "bar1")
.attr("x", function (d) { return x(d.countryName); })
.attr("width", x.rangeBand() / 3)
.attr("y", function (d) { return y0(d.totalhealthworkers); })
.attr("height", function (d, i, j) { return height - y0(d.totalhealthworkers); })
.on('mouseover', tip.show)
.on('mouseout', tip.hide)
bars.append("rect")
.attr("class", "bar2")
.attr("x", function(d) { return x(d.countryName) + x.rangeBand()/2; })
.attr("width", x.rangeBand() / 3)
.attr("y", function(d) { return y1(d.totalhealthfacilities); })
.attr("height", function (d, i, j) { return height - y1(d.totalhealthfacilities); })
});
function type(d) {
d.totalhealthworkers = +d.totalhealthworkers;
d.totalhealthfacilities = +d.totalhealthfacilities;
return d;
}
</script>
</body></div>
</html>
This is the JSON file that I am using.
[{"countryName":"Afghanistan","totalhealthworkers":"113.9","totalhealthfacilities":"4.50239"}]
227
You may need to add
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
This is according to the d3 version if you use v3 then tip is
<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
If you use v4, use this for tip
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
