Как получить всплывающую подсказку о наведении курсора на кружок SVG - PullRequest
Новая
       26

Как получить всплывающую подсказку о наведении курсора на кружок SVG

0 голосов
/ 25 мая 2019

Я пытаюсь получить всплывающую подсказку при наведении курсора на мои узлы svg на d3. Я пробовал разные способы его кодирования, но, похоже, он не работает. Я также немного запутался, так как уже использовал функцию наведения мыши для выделения кругов. Я добавил фрагмент из своего кода здесь 

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


var svg = d3.select('body').append('svg')
  .attr('height',h)
  .attr('width',w)


var circles = svg.selectAll('circle')
    .data(data.nodes)
    .enter()
  .append('circle')
    .attr('cx', function (d) { return d.x })
    .attr('cy', function (d) { return d.y })
    .attr('r', function (d) { return d.amount/50 })
    .attr('fill', function (d) { return "blue" })
    .attr('stroke','yellow')
    .attr('stroke-width',0)
      .on('mouseover',function() {
        d3.select(this)
          .transition()
          .duration(1000)
          .attr('stroke-width',5)
          .attr('opacity',1)
          svg.selectAll('circle')
          .attr('opacity',0);
          svg.selectAll('line')
          .attr('opacity',0)
      })

      .on('mouseout',function () {
        d3.select(this)
          .transition()
          .duration(1000)
          .attr('stroke-width',0)
          svg.selectAll("circle") .attr("opacity", 1)
          svg.selectAll('line')
          .attr('opacity',1)
      })



d3.select("body")
    .selectAll('div')
          .on("mouseover", function(d){tooltip.text(d); return tooltip.style("visibility", "visible");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");})

1 Ответ

0 голосов
/ 25 мая 2019

Вот один из тех, что я сделал ранее;) Стиль всплывающей подсказки в этом случае определен в css (сохраняет его в javascript!)всплывающая подсказка) 

var width = 1000;
var height = 500;
var range = 100;
var cntPoints = 50;
var padding = {
  x: 50,
  y: 20
};

var points = d3.range(cntPoints).map(function() {
  return [Math.random() * range, Math.random() * range, Math.random() * 5];
})
var scaleX = d3.scale.linear().domain([0, range]).range([0, width - 20]);
var scaleY = d3.scale.linear().domain([0, range]).range([height - padding.y, 0]);
var scaleColor = d3.scale.linear().domain([0, 5]).range(["red", "green"]);

var axisX = d3.svg.axis();
axisX.scale(scaleX).orient('bottom');

var axisY = d3.svg.axis()
  .scale(scaleY)
  .orient('left')
  .ticks(3);

var drag = d3.behavior.drag()
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);

svg = d3.select('body')
  .append('svg')
  .attr('width', width)
  .attr('height', height)
  .style('padding-top', padding.y)
  .style('padding-left', padding.x);

svg.append("clipPath")
  .attr("id", "chart-area")
  .append("rect")
  .attr("x", 0)
  .attr("y", 0)
  .attr("width", width)
  .attr("height", height - padding.y);

rect = svg
  .append('rect')
  .attr('width', width)
  .attr('height', height)
  .attr('class', 'invisible')
  .on('click', function() {
    svg.selectAll('circle[fill="blue"]')
      .transition()
      .delay(function(d, i) {
        return i * 300;
      })
      .duration(1000)
      .attr('cx', function(d) {
        return scaleX(d[0]);
      })
      .attr('cy', function(d) {
        return scaleY(d[1]);
      })
      .attr('fill', function(d) {
        return scaleColor(d[2]);
      })

  });

svg.append('g')
  .attr('class', 'axis')
  .attr('transform', 'translate(0, ' + (height - padding.y) + ')')
  .call(axisX);

svg.append('g')
  .attr('class', 'axis')
  .call(axisY);

circles = svg
  .append('g')
  .attr('id', 'main-container')
  .attr('clip-path', 'url(#chart-area)')
  .selectAll('circle')
  .data(points)
  .enter()
  .append('circle')
  .attr('r', 14)
  .attr('cx', function(d) {
    return scaleX(d[0]);
  })
  .attr('cy', function(d) {
    return scaleY(d[1]);
  })
  .attr('fill', function(d) {
    return scaleColor(d[2]);
  })
  .attr("fill-opacity", 0.5)
  .attr("stroke-opacity", 0.8)
  .call(drag);

circles
  .on('mouseover', function(d) {
    coordinates = d3.mouse(this);

    d3.select("#tooltip")
      .style("left", coordinates[0] + padding.x + "px")
      .style("top", coordinates[1] + padding.y + "px")
      .select("#info")
      .text(tooltipText(d));

    d3.select("#tooltip").classed("hidden", false);
  })
  .on("mouseout", function() {
    d3.select("#tooltip").classed("hidden", true);
  })


function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this).classed("dragging", true);
}

function dragged(d) {
  d3.select(this)
    .attr("cx", d.x = d3.event.x)
    .attr("cy", d.y = d3.event.y);
}

function dragended(d) {
  d3.select(this).classed("dragging", false).attr('fill', 'blue');
}

function tooltipText(d) {
  return 'Color base: ' + Math.round(d[2] * 100) / 100 + ', Position: ' + Math.round(d[0] * 100) / 100 + ';' + Math.round(d[1] * 100) / 100;
}
#tooltip {
  position: absolute;
  width: 200px;
  height: auto;
  padding: 10px;
  background-color: rgba(128, 128, 128, 0.4);
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
  pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.8/d3.min.js"></script>
<div id="tooltip" class="hidden">
  <p><strong>Circle information</strong></p>
  <p><span id="info"></span></p>
</div>

Надеюсь, это поможет

...