如何解决如何在饼图和条形图标签中显示当前值，例如在工具提示中？
请参见下图。饼图仅显示类别2011、2012和2013。行条形图仅显示A先生，B先生和C先生。
如何编辑下面的代码以使标签显示悬停时显示的工具提示中的内容？
我想显示所有标签，例如“ 2011：80”而不是“ 2011”（使用选择来更改值）。
“ 2012：90”代替“ 2012”，“ 2013：80”代替“ 2013”。
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Removing Empty Bars</title>
<Meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="https://raw.githubusercontent.com/dc-js/dc.js/develop/web-src/examples/header.js"></script>
<p>Example demonstrating using a "<a href="https://github.com/dc-js/dc.js/wiki/FAq#fake-groups">Fake Group</a>" to remove
the empty bars of an ordinal bar chart when their values drop to zero.</p>
<p>(Note the use of <code><a href="https://dc-js.github.io/dc.js/docs/html/CoordinateGridMixin.html#elasticX">.elasticX(true)</a></code>
to force calculation of the X domain each round.)</p>
<div id="chart-ring-year"></div>
<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.1/dc.js"></script>
<script type="text/javascript">
var yearRingChart = new dc.PieChart("#chart-ring-year"),spendHistChart = new dc.BarChart("#chart-hist-spend"),spenderRowChart = new dc.RowChart("#chart-row-spenders");
// use static or load via d3.csv("spendData.csv").then(function(spendData) {/* do stuff */});
var spendData = [
{Name: 'Mr A',Spent: '$40',Year: 2011},{Name: 'Mr B',Spent: '$10',{Name: 'Mr C',{Name: 'Mr A',Spent: '$70',Year: 2012},Spent: '$20',Spent: '$50',Year: 2013},Spent: '$30',Year: 2013}
];
// normalize/parse data
spendData.forEach(function(d) {
d.Spent = d.Spent.match(/\d+/);
});
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
// set crossfilter
var ndx = crossfilter(spendData),yearDim = ndx.dimension(function(d) {return +d.Year;}),spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),nameDim = ndx.dimension(function(d) {return d.Name;}),spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),spendHist = spendDim.group().reduceCount(),nonEmptyHist = remove_empty_bins(spendHist)
yearRingChart
.width(200).height(200)
.dimension(yearDim)
.group(spendPerYear)
.innerRadius(50);
spendHistChart
.width(300).height(200)
.dimension(spendDim)
.group(nonEmptyHist)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticX(true)
.elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
.width(350).height(200)
.dimension(nameDim)
.group(spendPerName)
.elasticX(true);
dc.renderAll();
</script>
</div>
</body>
</html>解决方法
工具提示文本由.title()控制，因为title是工具提示的SVG标签，标签由.label()控制。
将上述每个函数传递给一个接受数据{key,value}并返回所需文本的函数。
默认的工具提示/标题功能为d => d.key + ': ' + d.value。
将标题函数复制到标签的一种简便方法是
yearRingChart
.label(yearRingChart.title())
或者，要进行更多控制，请自己定义：
.label(d => d.key + ': ' + d.value)
<!DOCTYPE html>
<html lang="en">
<head>
<title>dc.js - Removing Empty Bars</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://dc-js.github.io/dc.js/css/dc.css"/>
</head>
<body>
<div class="container">
<script type="text/javascript" src="https://raw.githubusercontent.com/dc-js/dc.js/develop/web-src/examples/header.js"></script>
<div id="chart-ring-year"></div>
<div id="chart-hist-spend"></div>
<div id="chart-row-spenders"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.1.1/d3.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.12/crossfilter.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dc/4.1.1/dc.js"></script>
<script type="text/javascript">
var yearRingChart = new dc.PieChart("#chart-ring-year"),spendHistChart = new dc.BarChart("#chart-hist-spend"),spenderRowChart = new dc.RowChart("#chart-row-spenders");
// use static or load via d3.csv("spendData.csv").then(function(spendData) {/* do stuff */});
var spendData = [
{Name: 'Mr A',Spent: '$40',Year: 2011},{Name: 'Mr B',Spent: '$10',{Name: 'Mr C',{Name: 'Mr A',Spent: '$70',Year: 2012},Spent: '$20',Spent: '$50',Year: 2013},Spent: '$30',Year: 2013}
];
// normalize/parse data
spendData.forEach(function(d) {
d.Spent = d.Spent.match(/\d+/);
});
function remove_empty_bins(source_group) {
return {
all:function () {
return source_group.all().filter(function(d) {
return d.value != 0;
});
}
};
}
// set crossfilter
var ndx = crossfilter(spendData),yearDim = ndx.dimension(function(d) {return +d.Year;}),spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),nameDim = ndx.dimension(function(d) {return d.Name;}),spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),spendHist = spendDim.group().reduceCount(),nonEmptyHist = remove_empty_bins(spendHist)
yearRingChart
.width(200).height(200)
.ordinalColors(d3.schemeCategory10)
.label(yearRingChart.title())
.dimension(yearDim)
.group(spendPerYear)
.innerRadius(50);
spendHistChart
.width(300).height(200)
.ordinalColors(d3.schemeCategory10)
// .label(spendHistChart.title())
.dimension(spendDim)
.group(nonEmptyHist)
.x(d3.scaleBand())
.xUnits(dc.units.ordinal)
.elasticX(true)
.elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
.width(350).height(200)
.ordinalColors(d3.schemeCategory10)
.label(d => d.key + ': ' + d.value)
.dimension(nameDim)
.group(spendPerName)
.elasticX(true);
dc.renderAll();
</script>
</div>
</body>
</html>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
