Как добавить всплывающую подсказку к моей диаграмме d3? - PullRequest
Новая
       81

Как добавить всплывающую подсказку к моей диаграмме d3?

0 голосов
/ 09 апреля 2020

Я изо всех сил пытаюсь получить всплывающую подсказку с моей диаграммой d3. Я попытался настроить пример подсказки d3 для своего кода, но ничего не получилось. Я просто хочу иметь возможность получить значение, когда вы наводите курсор мыши на панель. Это может быть забавно, потому что я помещаю данные в код, поэтому я не могу точно определить, как были нарисованы столбцы. Я новичок в javascript и в основном борюсь с подсказками; Я искал inte rnet. Пожалуйста, помогите 

<!-- Code from d3-graph-gallery.com -->
<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Add 2 buttons -->
<button onclick="update(data1)">Black women's ratings</button>
<button onclick="update(data2)">White women's ratings</button>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<script>
  // create 2 data_set
  var data1 = [{
      group: "Beautiful",
      value: 4.3
    },
    {
      group: "Professional",
      value: 3.4
    },
    {
      group: "Sexy/Attractive",
      value: 4.1
    }
  ];

  var data2 = [{
      group: "Beautiful",
      value: 2.6
    },
    {
      group: "Professional",
      value: 2.3
    },
    {
      group: "Sexy/Attractive",
      value: 2.5
    }
  ];

  // set the dimensions and margins of the graph
  var margin = {
      top: 20,
      right: 30,
      bottom: 40,
      left: 90
    },
    width = 460 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select("#my_dataviz")
    .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 + ")");

  // X axis
  var x = d3.scaleBand()
    .range([0, width])
    .domain(data1.map(function(d) {
      return d.group;
    }))
    .padding(0.2);
  svg.append("g")
    .attr("transform", "translate(0," + height + ")")
    .call(d3.axisBottom(x))

  // Add Y axis
  var y = d3.scaleLinear()
    .domain([0, 5])
    .range([height, 0]);
  svg.append("g")
    .attr("class", "myYaxis")
    .call(d3.axisLeft(y));

  // A function that create / update the plot for a given variable:
  function update(data) {

    var u = svg.selectAll("rect")
      .data(data)

    u
      .enter()
      .append("rect")
      .merge(u)
      .transition()
      .duration(1000)
      .attr("x", function(d) {
        return x(d.group);
      })
      .attr("y", function(d) {
        return y(d.value);
      })
      .attr("width", x.bandwidth())
      .attr("height", function(d) {
        return height - y(d.value);
      })
      .attr("fill", "#654990")
      .attr("id", "bar")
  }
  // create a tooltip
  var tooltip2 = d3.select("#my_dataviz")
    .append("div")
    .style("position", "absolute")
    .style("visibility", "hidden")
    .style("background-color", "white")
    .style("border", "solid")
    .style("border-width", "1px")
    .style("border-radius", "5px")
    .style("padding", "10px")
    .html("<p>I'm a tooltip written in HTML</p><br>Fancy<br><span style='font-size: 40px;'>Isn't it?</span>");


  d3.select("#bar")
    .on("mouseover", function() {
      return tooltip2.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip2.style("top", (event.pageY - 2390) + "px").style("left", (event.pageX - 800) + "px");
    })
    .on("mouseout", function() {
      return tooltip2.style("visibility", "hidden");
    });

  // Initialize the plot with the first dataset
  update(data1)
</script>
...