如何將鼠標懸停在SVG圈上時獲得工具提示

Question

我正在嘗試將鼠標懸停在d3上的svg節點上時獲取工具提示。 我已經嘗試了不同的方法來編寫它，但它似乎沒有工作。 我也有點困惑，因為我已經使用鼠標懸停功能來突出顯示圓圈。 我在這里添加了代碼片段

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

Answer 1

這是我之前制作的一個;）此實例中的工具提示樣式在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", dx = d3.event.x) .attr("cy", dy = 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> 

希望這可以幫助