我使用工具提示创建了圆环图，但是在鼠标上方我需要显示小行/ poniter并在行顶部显示标签/值。
下面的图片有我想要显示的预期结果。
http://s28.postimg.org/kvqeicxz1/Expected_IMAGE.png
但我无法在鼠标悬停时创建线条，期望在工具提示中显示边框。请帮助我，如何创建鼠标时显示指针/行并显示标签/值。
这是我的代码：
$(document).ready(function() {
(function( $ ){
var methods = {
el: "",
init : function(options) {
var clone = jQuery.extend(true, {}, options["data"]);
methods.el = this;
methods.setup(clone);
},
setup: function(dataset){
this.width = 478;
this.height = 295;
this.radius = Math.min(this.width, this.height) / 2;
var selectwidth = 478;
var selectheight = 295;
//Get the color scale
this.redcolor = d3.scale.ordinal().range(['#b4b4b4']);
this.color = d3.scale.ordinal().range([ '#9ed3ef', '#fdcf2d', '#6698FF' ]);
//Get the pie layour
this.pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.total; });
//Get the arc
this.arc = d3.svg.arc()
.innerRadius(this.radius - 71)
.outerRadius(this.radius - 63);
this.svg = d3.select(methods.el["selector"])
.classed("svg-container", true)
.append("svg")
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("id", "CheckoutType")
.attr("viewBox", "0 0 500 295")
.classed("svg-content-responsive", true)
.attr("class", "licensepiechart")
.attr("height", selectheight)
.append("g")
.attr("transform", "translate(" + (this.width/2) + "," + (this.height/2) + ")");
this.segments = this.svg.append("g")
.attr("class", "segments");
var centerx = d3.transform(this.svg.select("g")
.attr("transform")).translate[0];
var centery = d3.transform(this.svg.select("g")
.attr("transform")).translate[1];
this.segments.append("svg:text")
.attr("id","centerCapacityText")
.attr("x",centerx)
.attr("y", centery-15)
.attr("text-anchor", "middle")
.style("font-size", "13.34px")
.style("fill", "#5A5A5A")
.style("line-height", "30.67px")
.text("Capacity");
this.segments.append("svg:text")
.attr("id","centerLicenseText")
.attr("x", centerx)
.attr("y", centery+15)
.attr("text-anchor","middle")
.style("font-size", "30px")
.style("fill", "#5A5A5A")
.style("line-height", "59.95px")
.text("0");
this.labels = this.svg.append("g")
.style("font-size", "14px")
.style("fill", "#5A5A5A")
.style("line-height", "13.34px")
.attr("class", "labels");
if (licenseusagecapcity != 0) {
this.pointers = this.svg.append("g").attr("class", "pointers");
}
// add legends..
var xlabel = -360;
var ylabel = 120;
this.legend = this.svg.append("g")
.attr("class", "legend")
.attr("x", 500)
.attr("height", 50)
.attr("width", 300)
.attr("transform", "translate(" + (-220) + ", 60)");
},
oldPieData : "",
pieTween : function(d, i) {
var that = this;
var theOldDataInPie = methods.oldPieData;
// Interpolate the arcs in data space
var s0;
var e0;
if (theOldDataInPie[i]) {
s0 = theOldDataInPie[i].startAngle;
e0 = theOldDataInPie[i].endAngle;
} else if (!(theOldDataInPie[i])
&& theOldDataInPie[i - 1]) {
s0 = theOldDataInPie[i - 1].endAngle;
e0 = theOldDataInPie[i - 1].endAngle;
} else if (!(theOldDataInPie[i - 1])
&& theOldDataInPie.length > 0) {
s0 = theOldDataInPie[theOldDataInPie.length - 1].endAngle;
e0 = theOldDataInPie[theOldDataInPie.length - 1].endAngle;
} else {
s0 = 0;
e0 = 0;
}
var i = d3.interpolate({
startAngle : s0,
endAngle : e0
}, {
startAngle : d.startAngle,
endAngle : d.endAngle
});
return function(t) {
var b = i(t);
return methods.arc(b);
};
},
removePieTween: function(d,i) {
var that = this;
s0 = 2 * Math.PI;
e0 = 2 * Math.PI;
var i = d3.interpolate({startAngle: d.startAngle, endAngle: d.endAngle}, {startAngle: s0, endAngle: e0});
return function(t) {
var b = i(t);
return methods.arc(b);
};
},
update: function(dataSet){
methods.el = this;
methods.svg = d3.select(methods.el["selector"] + " .piechart");
methods.segments = d3.select(methods.el["selector"] + " .segments");
methods.labels = d3.select(methods.el["selector"] + " .labels");
methods.pointers = d3.select(methods.el["selector"] + " .pointers");
methods.legend = d3.select(methods.el["selector"] + " .legend");
methods.currentDataSet = dataSet;
var div = d3.select("body").append("methods").attr("class", "toolTip");
dataSet.forEach(function(d) {
if (licenseusagecapcity == 0) {
d.total = -1;
} else {
d.total = +d.value;
}
});
var w = 200;
this.piedata = methods.pie(dataSet);
//__slices
this.path = methods.segments.selectAll("path.pie")
.data(this.piedata);
this.path.enter().append("path")
.attr("class", "pie")
.attr("fill", function(d, i) {
if (licenseusagecapcity == 0) {
return methods.redcolor(i);
} else {
return methods.color(i);;
}
}).transition().duration(50).attrTween("d",
methods.pieTween);
this.path.transition().duration(50).attrTween("d", methods.pieTween);
this.path.exit().transition().duration(50).attrTween("d", methods.removePieTween).remove();
//center text
methods.segments.select("#centerLicenseText")
.text(licenseusagecapcity);
//__labels
var labels = methods.labels.selectAll("text")
.data(this.piedata);
labels.enter()
.append("text")
.attr("text-anchor", "middle");
labels
.attr("x", function(d) {if(d.data.value!=0 && d.data.value!=-1 ){
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cx = Math.cos(a) * ((methods.radius) - 65);
return d.x = Math.cos(a) * ((methods.radius) - 20);
}})
.attr("y", function(d) {if(d.data.value!=0 && d.data.value!=-1){
var a = d.startAngle + (d.endAngle - d.startAngle)/2 - Math.PI/2;
d.cy = Math.sin(a) * ((methods.radius) - 65);
return d.y = Math.sin(a) * ((methods.radius) - 20);
}})
.text(function(d) {if(d.data.value!=0 && d.data.value!=-1){
var labels = d.data.label;
var toolTipText = labels.length > 16 ? labels.substring(0,10) + "..." : labels;
//return d.data.value;
}})
.each(function(d) {
var bbox = this.getBBox();
d.sx = d.x - bbox.width/2 - 2;
d.ox = d.x + bbox.width/2 + 2;
d.sy = d.oy = d.y + 5;
})
.transition().duration(100);
labels.transition().duration(100);
labels.exit().transition().duration(100);
this.path.on("mousemove", function(d){if(d.data.value!=0 && d.data.value!=-1 ){
div.style("left", d3.event.pageX+10+"px");
div.style("top", d3.event.pageY-25+"px");
div.style("font-size", "14px");
div.style("fill", "#5A5A5A");
div.style("line-height", "13.34px");
div.style("display", "inline-block");
div.html((d.data.label)+"<br>"+"<br>"+"<b>"+"<font color= '#696969' font-size = '15px'>"+(d.data.value));
}});
this.path.on("mouseout", function(d){
div.style("display", "none");
});
//__pointers
methods.pointers.append("defs").append("marker")
.attr("id", "circ")
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("refX", 0)
.attr("refY", 0)
.append("circle")
.attr("cx", 0)
.attr("cy",0)
.attr("r",0);
var pointers = methods.pointers.selectAll("path.pointer").data(this.piedata);
pointers.enter()
.append("path")
.attr("class", "pointer")
.style("fill", "none")
.style("stroke", "#f3f3f3")
.style("stroke-width", "0px")
.attr("marker-end", "url(#circ)");
pointers
.attr("d", function(d) {
if(d.cx > d.ox) {
return "M" + d.sx + "," + d.sy + "L" + d.ox + "," + d.oy + " " + d.cx + "," + d.cy;
} else {
return "M" + d.ox + "," + d.oy + "L" + d.sx + "," + d.sy + " " + d.cx + "," + d.cy;
}
})
.transition().duration(100);
pointers.transition().duration(100);
pointers.exit().transition().duration(100)
// append legends
var legend = methods.legend;
var tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function(d) {if(d.data.value!=0 && d.data.value!=-1 ){
return d.data.label;
}})
methods.svg.call(tip);
legend.selectAll('g').data(this.piedata)
.enter()
.append('g')
.each(function(d, i) {
if( d.data.value!=0 && d.data.value!=-1){
var g = d3.select(this);
g.append("rect")
.attr("id", "icon")
.attr("x", i * 60)
.attr("y", 65)
.attr("width", 10)
.attr("height", 10)
.style("fill", methods.color(i))
.on("mousemove", tip.show)
.on("mouseout", tip.hide);
g.append("text")
.attr("x", i * 60 + 15)
.attr("y", 73)
.attr("height",30)
.attr("width",100)
.style("fill", d.data.label)
.text(function(d) {if(d.data.value!=0 && d.data.value!=-1){
var labels = d.data.label;
var toolTipText = labels.length > 6 ? labels.substring(0,6) + ".." : labels;
return toolTipText;
}});
}});
this.oldPieData = this.piedata;
},
};
$.fn.piechart = function(methodOrOptions) {
if ( methods[methodOrOptions] ) {
return methods[ methodOrOptions ].apply( this, Array.prototype.slice.call( arguments, 1 ));
} else if ( typeof methodOrOptions === 'object' || ! methodOrOptions ) {
// Default to "init"
return methods.init.apply( this, arguments );
} else {
$.error( 'Method ' + methodOrOptions + ' does not exist' );
}
};
})(jQuery);
var dataCharts = [
{
"data" : [ {
"segments" : [
{
"label" : "Commuter",
"value" : 55
},
{
"label" : "Live",
"value" : 65
},
{
"label" : "Commuter2",
"value" : 75
} ]
} ]
},
];
var clone = jQuery.extend(true, {}, dataCharts);
// __invoke concentric
$('[data-role="licensepiechart"]').each(function(index) {
var selector = "licensepiechart"+index;
$(this).attr("id", selector);
var options = {
data: clone[0].data,
};
$("#"+selector).piechart(options);
$("#"+selector).piechart('update', clone[0].data[0].segments);
});
$(".testers a").on( "click", function(e) {
e.preventDefault();
var clone = jQuery.extend(true, {}, dataCharts);
var min = 0;
var max = 3;
//__invoke pie chart
$('[data-role="licensepiechart"]').each(function(index) {
pos = Math.floor(Math.random() * (max - min + 1)) + min;
$("#"+$(this).attr("id")).piechart('update', clone[pos].data[0].segments);
});
});
});
我的tooptip syle是：
toolTip {
position: absolute;
display: none;
width: auto;
height: auto;
background: none repeat scroll 0 0 white;
border: 0 none;
border-radius: 8px 8px 8px 8px;
box-shadow: -3px 3px 15px #888888;
color: black;
font: 12px sans-serif;
padding: 5px;
text-align: center;