在 SVG 图形的相交部分添加悬停事件

Question

在 SVG 图形的相交部分添加悬停事件

4

我创建了一个fiddle http://jsfiddle.net/bhyt7L5z/

我有5个椭圆相交。我想捕获相交区域的hover事件，并在工具提示中显示相应的数据。类似这样：

    $('paths').hover(function(e) {
        console.log('show content related to intersection');
    });

有人能给我指点如何做到这一点吗。

是否有JavaScript中可用的图表，可以提供交互式椭圆维恩图。

敬礼

- aishwarya

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zamboney · Answer 1

只需为每个椭圆附加.attr('id','ellipse1')，现在您就可以使用它们了。

 $('#ellipse1').hover(function(e) {
        console.log('show content related to intersection');
    });

你的 jsfiddle 代码：

var width = 450,
   height = 400


    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);


svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(108,255,108,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(30deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse1")
.attr("data-toggle","tooltip")
.attr("title","ellipse1")


svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(168,255,168,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(70deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse2")
.attr("data-toggle","tooltip")
.attr("title","ellipse2")

svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(148,255,148,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(110deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse3")
.attr("data-toggle","tooltip")
.attr("title","ellipse3")

svg.append("svg:ellipse")
.attr("cx", 200)
.attr("cy", 200)
.attr("rx", 50)
.attr("ry",100)
.style("fill", 'rgba(128,255,128,0.4)')
.style("stroke", "#777")
.style("stroke-width", '1px')
.style("transform", 'rotate(140deg)')
.style("transform-origin", "50% 50%")
.attr("id","ellipse4")
.attr("data-toggle","tooltip")
.attr("title","ellipse4")
 $('[data-toggle="tooltip"]').tooltip({container: 'body'});

svg { 
    border:1px dotted #000; 
}

<script src="http://d3js.org/d3.v3.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="content"></div>