-1
我正在嘗試使用d3構建餅圖。我學到的概念從網站click here但是當我將鼠標懸停在餅圖的一部分的工具提示不顯示 這裏使用懸停餅圖時不會生成工具提示
#chart {
height: 360px;
margin: 0 auto; /* NEW */
position: relative;
width: 360px;
}
.tooltip {
background: #eee;
box-shadow: 0 0 5px #999999;
color: #333;
display: none;
font-size: 12px;
left: 130px;
padding: 10px;
position: absolute;
text-align: center;
top: 95px;
width: 80px;
z-index: 4;
}
.legend {
font-size: 12px;
}
rect {
cursor: pointer; /* NEW */
stroke-width: 2;
}
rect.disabled { /* NEW */
fill: transparent !important; /* NEW */
}
我的CSS樣式代碼,這裏是爲JS部分
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = 500,
radius = Math.min(width, height)/2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
console.log(tooltip);
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label + " " + d.data.value);
});
path.on('mouseover', function(d) { // NEW
var total = d3.sum(dataset.map(function(d) { // NEW
return d.value; // NEW
}));
console.log("mouseover"); // NEW
var percent = Math.round(1000 * d.data.value/total)/10; // NEW
tooltip.select('.label').html(d.data.label); // NEW
tooltip.select('.count').html(d.data.value); // NEW
tooltip.select('.percent').html(percent + '%'); // NEW
tooltip.style('display', 'block'); // NEW
});
path.on('mouseout', function() {
console.log("mouseout"); // NEW
tooltip.style('display', 'none'); // NEW
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length/2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color);
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};
代碼
它是取數據集,併到整個餅圖是要追加 ,這裏的DOM元素的功能是一個樣本數據集
var dataset = [
{ label: 'Abulia', value: 10 },
{ label: 'Betelgeuse', value: 20 },
{ label: 'Cantaloupe', value: 30 },
{ label: 'Dijkstra', value: 40 }
];
而不是顯示:無,顯示:阻止事情在CSS我也試圖不透明:1,不透明度:0的事情,但仍然沒有結果。 在此先感謝
A
回答
0
現在它的生成這裏的工作代碼
$rootScope.renderPieChart = function(dataset,dom_element_to_append_to){
var width = $(dom_element_to_append_to).width(),
height = $(window).height() - 120,
radius = Math.min(width, height)/2;
var donutWidth = 75;
var legendRectSize = 18;
var legendSpacing = 4;
dataset.forEach(function(item){
item.enabled = true;
});
/*var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
*/
var color = $rootScope.defaultColorScheme;
var svg = d3.select(dom_element_to_append_to)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width/2 + "," + height/2 + ")");
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(radius - donutWidth);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.value; });
var tooltip = d3.select(dom_element_to_append_to)
.append('div')
.attr('class', 'tooltip');
tooltip.append('div')
.attr('class', 'label');
tooltip.append('div')
.attr('class', 'count');
tooltip.append('div')
.attr('class', 'percent');
var path = svg.selectAll('path')
.data(pie(dataset))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color(d.data.label);
})
.each(function(d) { this._current = d; });
path.on('mouseover', function(d) {
var total = d3.sum(dataset.map(function(d) {
return (d.enabled) ? d.value : 0;
}));
var percent = Math.round(1000 * d.data.value/total)/10;
tooltip.select('.label').html(d.data.label.toUpperCase()).style('color','black');
tooltip.select('.count').html(d.data.value);
tooltip.select('.percent').html(percent + '%');
/* //console.log(percent);
//console.log(tooltip.select('.percent')); */
tooltip.style('display', 'block');
tooltip.style('opacity',2);
});
path.on('mousemove', function(d) {
tooltip.style('top', (d3.event.layerY + 10) + 'px')
.style('left', (d3.event.layerX - 25) + 'px');
});
path.on('mouseout', function() {
tooltip.style('display', 'none');
tooltip.style('opacity',0);
});
var legend = svg.selectAll('.legend')
.data(color.domain())
.enter()
.append('g')
.attr('class', 'legend')
.attr('transform', function(d, i) {
var height = legendRectSize + legendSpacing;
var offset = height * color.domain().length/2;
var horz = -2 * legendRectSize;
var vert = i * height - offset;
return 'translate(' + horz + ',' + vert + ')';
});
legend.append('rect')
.attr('width', legendRectSize)
.attr('height', legendRectSize)
.style('fill', color)
.style('stroke', color)
.on('click', function(label) { // NEW
var rect = d3.select(this); // NEW
var enabled = true; // NEW
var totalEnabled = d3.sum(dataset.map(function(d) { // NEW
return (d.enabled) ? 1 : 0; // NEW
})); // NEW
if (rect.attr('class') === 'disabled') { // NEW
rect.attr('class', ''); // NEW
} else { // NEW
if (totalEnabled < 2) return; // NEW
rect.attr('class', 'disabled'); // NEW
enabled = false; // NEW
} // NEW
pie.value(function(d) { // NEW
if (d.label === label) d.enabled = enabled; // NEW
return (d.enabled) ? d.value : 0; // NEW
}); // NEW
path = path.data(pie(dataset)); // NEW
path.transition() // NEW
.duration(750) // NEW
.attrTween('d', function(d) { // NEW
var interpolate = d3.interpolate(this._current, d); // NEW
this._current = interpolate(0); // NEW
return function(t) { // NEW
return arc(interpolate(t)); // NEW
}; // NEW
}); // NEW
}); // NEW
legend.append('text')
.attr('x', legendRectSize + legendSpacing)
.attr('y', legendRectSize - legendSpacing)
.text(function(d) { return d; })
};
相關問題
- 1. 懸停時不顯示工具提示
- 2. 懸停工具提示顯示圖像
- 3. Bokeh圖表:懸停工具提示
- 4. 懸停時的工具提示位置
- 5. 如何在圖例懸停的Google餅圖上顯示工具提示?
- 6. ZingChart餅圖工具提示不顯示
- 7. 懸停時在工程圖中添加工具提示圖標
- 8. jqPlot餅圖工具提示
- 9. CSS bootstrap懸停工具提示不會工作
- 10. 從Google可視化餅圖(核心圖表)中刪除懸停工具提示
- 11. 懸停時,工具提示顯示圖像?
- 12. Chart.js條形圖:顯示標籤懸停時的工具提示
- 13. 響應式工具提示與工具提示懸停
- 14. 懸停在SVG多邊形上時不顯示工具提示
- 15. 如何確保工具提示永遠不會消失懸停
- 16. Wpf/SL圖表 - 餅圖工具提示
- 17. Birt Chart工具提示2鼠標懸停時的工具提示
- 18. 工具提示懸停在IE11
- 19. 鼠標懸停和ajax工具提示
- 20. 允許鼠標懸停工具提示
- 21. 隱藏工具提示懸停?
- 22. Javascript工具提示懸停並點擊
- 23. 工具提示/懸停中的音頻?
- 24. 引導工具提示懸停問題
- 25. 工具提示在第二次懸停時不起作用
- 26. 如何在懸停時禁用自舉工具提示(不會消失)
- 27. HighChart餅圖工具提示修復
- 28. 格式化餅圖工具提示
- 29. D3更新餅圖的工具提示
- 30. 餅圖自定義工具提示
什麼是'dom_element_to_append_to'?它是否在SVG之外?爲什麼你有'絕對位置'? –
dom_element_to_append_to是餅圖所附的html文件中的dom元素,如 –