Как исправить подсказку d3.js - PullRequest
Новая
       83

Как исправить подсказку d3.js

0 голосов
/ 05 декабря 2018

Я хочу реализовать всплывающую подсказку в моем коде venn-example.js.И я сталкиваюсь с трудностями в том же. Я попробовал два кода всплывающей подсказки.Один из -

1 https://github.com/benfred/venn.js

[2] https://bl.ocks.org/arnicas/c911d0abfe9819305660

Но оба не дают желаемого результата.

Код -

venn-example.js 

var sets;
// document.getElementById("venn").innerHTML = localStorage.getItem("set");

sets = JSON.parse(localStorage.getItem("sets"));


  console.log("sets=",sets)
  console.log("sets.length = ", sets.length)

  var lengthWidthHeights = [
    // min, max, width, height
    [0, 24, 500, 500],
    [25, 50, 1000, 800],
    [51, 100, 1300, 1300],
    [101, 150, 1500, 1600],
    [151, 250, 1700, 1900],
    [251, 350, 2000, 2500],
    [351, 450, 2500, 3000],
    [451, 550, 3000, 3500]
  ];
  var { length } = sets;
  console.log("length =", length);
  var chart;
  var foundItem = lengthWidthHeights.find(([min, max]) => length >= min && length <= max);
  if (foundItem) {
    console.log("inside foundItem =", foundItem);
    const [,,width, height] = foundItem;
    chart = venn.VennDiagram().width(width).height(height);


  }

d3.select("#venn").datum(sets).call(chart);



// ------------- mouse out & over code ------------

d3.selectAll("#rings .venn-circle")
    .on("mouseover", function(d, i) {
        var node = d3.select(this).transition();
        node.select("path").style("fill-opacity", .2);
        node.select("text").style("font-weight", "100")
                           .style("font-size", "36px");
    })
    .on("mouseout", function(d, i) {
        var node = d3.select(this).transition();
        node.select("path").style("fill-opacity", 0);
        node.select("text").style("font-weight", "100")
                           .style("font-size", "24px");
    });

// ------------- mouse out & over code ends  --------------------

// ------------------ Tool Tip code - Bennfred.js ---------------

var div = d3.select("#venn")
div.datum(sets).call(venn.VennDiagram());

// add a tooltip
var tooltip = d3.select("#venn").append("div")
    .attr("class", "venntooltip");

// add listeners to all the groups to display tooltip on mouseover
div.selectAll("g")
    .on("mouseover", function(d, i) {
        // sort all the areas relative to the current item
        venn.sortAreas(div, d);

        // Display a tooltip with the current size
        tooltip.transition().duration(400).style("opacity", .9);
        tooltip.text(d.size + " users");

        // highlight the current path
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("stroke-width", 3)
            .style("fill-opacity", d.sets.length == 1 ? .4 : .1)
            .style("stroke-opacity", 1);
    })

    .on("mousemove", function() {
        tooltip.style("left", (d3.event.pageX) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
    })

    .on("mouseout", function(d, i) {
        tooltip.transition().duration(400).style("opacity", 0);
        var selection = d3.select(this).transition("tooltip").duration(400);
        selection.select("path")
            .style("stroke-width", 0)
            .style("fill-opacity", d.sets.length == 1 ? .25 : .0)
            .style("stroke-opacity", 0);
    });


    // Tool Tip code ends


    // ------------ Tool tip code 2 - Simple d3.js---------------


    var tooltip = d3.select("body")
    .append("div")
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

var sampleSVG = d3.select("#venn")
    .append("svg")
    .attr("class", "sample")
    .attr("width", 300)
    .attr("height", 300);

d3.select("#venn svg")
    .append("circle")
    .attr("stroke", "black")
    .attr("fill", "aliceblue")
    .attr("r", 50)
    .attr("cx", 52)
    .attr("cy", 52)
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

    //----------tool tip code 2 ends  -----------------

Изображение -

Tooltip

...