Collectives™ on Stack Overflow
Find centralized, trusted content and collaborate around the technologies you use most.
Learn more about Collectives
Teams
Q&A for work
Connect and share knowledge within a single location that is structured and easy to search.
Learn more about Teams
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>
<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"}]
–
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>
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
