1

インタラクティブな円グラフを作成しようとしています。スライスをホバーすると、オブジェクトが追加され、スライスの真上に表示されます。問題は、長方形の XY 座標を取得することです。

さらに、これら 2 つのメソッドを使用してホバー オブジェクトを作成しています。1 つは、パイ スライスの作成時に既存のオブジェクトを埋め込み、ホバー時にオンとオフを切り替えることです。もう1つは、マウスオーバーイベントが作成されたときにオブジェクトを追加し、マウスアウトが発生するたびにオブジェクトを削除することです.

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 に答える