D3甜甜圈图表图例或标签悬停
D3 donut chart legend or labels on hover
我在这里使用D3.js创建了一个图表(http://jsfiddle.net/jkuchta/u57mt97c/),但我遇到了标签问题。我怎么能添加一个图例到这个或有标签只出现在悬停?
// DRAW SLICE LABELS
var sliceLabel = label_group.selectAll("text")
.data(donut(data.pct));
sliceLabel.enter().append("svg:text")
.attr("class", "arcLabel")
.attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")"; })
.attr("text-anchor", "middle")
.text(function(d, i) {return labels[i]; });
我最终使用下面的方法创建了图表。小提琴(https://jsfiddle.net/dp50bLmo/)
<style>
.legend { margin: 0 0 20px 20px; }
.chartLabel { font: 14px sans-serif; fill: #000; }
.arcLabel { font: 11px sans-serif; fill: #fff; }
.bar { min-height: 100%; height: 156px !important; }
</style>
<script type="text/javascript">
function build_chart(data, labels, chart_selector) {
var total = 0;
for(i = 0; i < data.pct.length; i++) {
total += data.pct[i];
}
var w = 320,
h = 320,
r = Math.min(w, h) / 2,
dur = 750,
color = d3.scale.category10(),
donut = d3.layout.pie().sort(null),
arc = d3.svg.arc().innerRadius(r - 70).outerRadius(r - 20);
var svg = d3.select(chart_selector).append("svg:svg")
.attr("width", w).attr("height", h);
var arc_grp = svg.append("svg:g")
.attr("class", "arcGrp")
.attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");
var label_group = svg.append("svg:g")
.attr("class", "lblGroup")
.attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");
var center_group = svg.append("svg:g")
.attr("class", "ctrGroup")
.attr("transform", "translate(" + (w / 2) + "," + (h / 2) + ")");
var pieLabel = center_group.append("svg:text")
.attr("dy", ".35em").attr("class", "chartLabel")
.attr("text-anchor", "middle")
.text(data.label);
var arcs = arc_grp.selectAll("path")
.data(donut(data.pct));
arcs.enter().append("svg:path")
.attr("stroke", "white")
.attr("stroke-width", 0.5)
.attr("fill", function(d, i) {return color(i);})
.attr("d", arc)
.each(function(d) {this._current = d});
var sliceLabel = label_group.selectAll("text")
.data(donut(data.pct));
sliceLabel.enter().append("svg:text")
.attr("class", "arcLabel")
.attr("transform", function(d) {return "translate(" + arc.centroid(d) + ")"; })
.attr("text-anchor", "middle")
.text(function(d, i) {return (data.pct[i] / total * 100).toFixed(1) + "%"; });
var legend = d3.select(chart_selector).append("svg")
.attr("class", "legend")
.attr("width", w)
.attr("height", 22 * labels.length)
.selectAll("g")
.data(color.domain().slice())
.enter().append("g")
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
legend.append("rect")
.attr("width", 18)
.attr("height", 18)
.style("fill", color);
legend.append("text")
.attr("x", 24)
.attr("y", 9)
.attr("dy", ".35em")
.text(function(d, i) { return labels[i]; });
}
</script>
<script type="text/javascript">
$(function(){
var chart_selector = '#chart';
var data = { label: 'Test Chart', pct: [] };
var labels = ['Label 1', 'Label 2', 'Label 3', 'Label 4'];
data.pct = [.1, .3, .4, .2];
build_chart(data, labels, chart_selector);
});
</script>
<div id="chart"></div>
相关文章:
- 悬停时以矩形突出显示整个标签区域
- Chart.js条形图标签在悬停时被隐藏
- 如何使Highcharts中的渲染标签始终可见,并且相对于单击或悬停的点仍然可见
- jQuery悬停淡出p个标签,再淡出另一个标签
- 在每个条形图的中间添加文本标签&鼠标悬停事件
- 将鼠标悬停在切片上时更改d3.js饼图标签的颜色
- marquee标签不适用于谷歌铬悬停效果
- Chart.js-悬停弹出-添加带值的标签-不起作用
- Highcharts 单个水平堆叠条形图,始终显示数据名称(标签)和 %-年龄,并在鼠标悬停时显示数据编号和系列名称
- 半圆形圆环饼图,饼图上有标签(数据名称)和年龄百分比..和鼠标悬停上的数据编号
- 如何刷新 qtip 标签以在悬停时显示特定按钮的新标签
- 如何在 Arbor js 中将鼠标悬停在节点上时显示节点的标签
- 我在 标签中设置了背景图像,现在我想使用内联 CSS 在鼠标悬停事件上更改图像
- 我的 h1 标签链接在悬停时会显示一个下划线,我没有添加
- 高图表在类别标签悬停时显示工具提示
- 高图表中的标签悬停功能
- D3甜甜圈图表图例或标签悬停
- JSPlumb显示连接标签悬停
- CSS标签悬停
- HTML高亮标签悬停