1

我正在尝试创建一个交互式饼图。当切片悬停时，它应该附加一个对象并将其显示在切片的正上方。问题在于获取矩形的 XY 坐标。

此外，我正在使用这两种方法来创建悬停对象。一种是在创建饼图时嵌入现有对象，并在悬停时打开和关闭它。另一种是在创建鼠标悬停事件时附加对象，并在每次鼠标移出时删除它。

var w = 600,                        //width
h = 500,                            //height
color = d3.scale.category20c();     //builtin range of colors
var outerRadius = w / 3.2;
var innerRadius = w / 6;

data = [{"label":"Nasik", "value":20}, 
        {"label":"Delhi", "value":20}, 
        {"label":"Mumbai", "value":20},
        {"label":"Denver", "value":20},
        {"label":"Denver", "value":20},
        {"label":"Denver", "value":20},
        {"label":"Denver", "value":20},
        {"label":"Denver", "value":20},
        {"label":"Washington", "value":20},
        {"label":"Chicago", "value":20}];

var vis = d3.select("body")
    .append("svg:svg")              //create the SVG element inside the <body>
    .data([data])                   //associate our data with the document
        .attr("width", w)           
        .attr("height", h)
    .append("svg:g")                //make a group to hold our pie chart
        .attr("transform", "translate(" + outerRadius + "," + outerRadius + ")")    
var arc = d3.svg.arc()              
      .innerRadius(innerRadius)
    .outerRadius(outerRadius);

var pie = d3.layout.pie()           //this will create arc data for us given a list of values
    .value(function(d) { return d.value; });    //we must tell it out to access the value of each element in our data array

var arcs = vis.selectAll("g.slice")     //this selects all <g> elements with class slice (there aren't any yet)
    .data(pie)                          //associate the generated pie data (an array of arcs, each having startAngle, endAngle and value properties) 
    .enter()                            //this will create <g> elements for every "extra" data element that should be associated with a selection. The result is creating a <g> for every object in the data array
        .append("svg:g")                //create a group to hold each slice (we will have a <path> and a <text> element associated with each slice)
            .attr("class", "slice");    //allow us to style things in the slices (like text)

    arcs.append("svg:path")
    .attr("class", 'rohan')
            .attr("fill", function(d, i) { 

            //  return color(i); 
            return 'white';

            } ) //set the color for each slice to be chosen from the color function defined above
            .attr("d", arc);                                    //this creates the actual SVG path using the associated data (pie) with the arc drawing function

    d3.selectAll("g.slice").selectAll("path").attr("stroke-dasharray","5,5")

;

d3.selectAll("g.slice path")
.on("mouseover", function() {
        console.log('iam here');
        //alert('hello this is rohan');
        d3.select('.dot').style("stroke","steelblue").attr("x", cx -ch).attr("y", cy - ch).attr("height", ch * 2).attr("width", ch * 2);

})
.on("mouseout", function() {
        console.log('iam here');
        //alert('this is over');

})
;

d3.selectAll("svg").append("rect").attr("class", 'dot').attr("x", 150).attr("y", 200).attr("height", 100).attr("width", 200).style("fill", 'black');



    arcs.append("svg:text")                                     //add a label to each slice
            .attr("transform", function(d) {                    //set the label's origin to the center of the arc
            //we have to make sure to set these before calling arc.centroid
            d.innerRadius = innerRadius;
            d.outerRadius = outerRadius;
            return "translate(" + arc.centroid(d) + ")";        //this gives us a pair of coordinates like [50, 50]
        })
        .attr("text-anchor", "middle")                          //center the text on it's origin
        .text(function(d, i) { return data[i].label; });

我在这里包含了一个小提琴， http://jsfiddle.net/rohdz/27zCz/

先感谢您！

4

1 回答 1

1

您可以使用它来获取悬停元素的 x 和 y 坐标。

var x = parseInt($(this).attr("x"), 10);
var y = parseInt($(this).attr("y"), 10);

我用工具提示制作了一个条形图示例，并使用上述方法获取 x 和 y。

http://vida.io/documents/F3Ehr3qqeK28P22wn

您的饼图切片将有不同的角度。在顶部叠加工具提示会使其看起来不一致。我建议将悬停显示放置在固定位置（布局角落或饼图中心）。

更新：对于您的特定文档，您可以执行以下操作：

var x = $(this).parent().position().left;
var y = $(this).parent().position().top;
于 2013-09-22T06:15:39.123 回答