Warum funktioniert mein d3.tip nicht?

Question

Vor dem Hinzufügen der d3.tip Methode in den Code wird das Balkendiagramm angezeigt. Nach dem Hinzufügen der d3.tip Methode wird jedoch nichts angezeigt und dieser Fehler wird in der Konsole angezeigt. Wie löse ich dieses Problem und füge die d3.tip in mein Balkendiagramm ein? Uncaught TypeError: Object # hat keine Methode 'tip'

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;
}

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>Gesundheitspersonal:</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("Gesamtgesundheitspersonal pro 100.000 Einwohner");

  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("Gesamteinrichtungen pro 100.000 Einwohner");

  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;
}

Dies ist die JSON-Datei, die ich verwende.

[{"countryName":"Afghanistan","totalhealthworkers":"113.9","totalhealthfacilities":"4.50239"}]

Answer 1

Sie müssen möglicherweise hinzufügen

Answer 2

Dies gilt für die d3-Version. Wenn Sie v3 verwenden, dann ist der Tipp:

Wenn Sie v4 verwenden, verwenden Sie dies für den Tipp: