如何在饼图和条形图标签中显示当前值，如在工具提示中？

Question

请看下图。饼图仅显示类别 2011、2012 和 2013。条形图仅显示 A 先生、Mr.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: '', Year: 2011},
    {Name: 'Mr B', Spent: '', Year: 2011},
    {Name: 'Mr C', Spent: '', Year: 2011},
    {Name: 'Mr A', Spent: '', Year: 2012},
    {Name: 'Mr B', Spent: '', Year: 2012},
    {Name: 'Mr B', Spent: '', Year: 2013},
    {Name: 'Mr C', Spent: '', 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>

Answer 1

工具提示文本由 .title(), because title is the SVG tag for tooltips, and the label is controlled by .label() 控制。

向其中的每一个传递一个函数，该函数获取数据 {key, value} 和 returns 您想要的文本。

默认的tooltip/title函数是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: '', Year: 2011},
    {Name: 'Mr B', Spent: '', Year: 2011},
    {Name: 'Mr C', Spent: '', Year: 2011},
    {Name: 'Mr A', Spent: '', Year: 2012},
    {Name: 'Mr B', Spent: '', Year: 2012},
    {Name: 'Mr B', Spent: '', Year: 2013},
    {Name: 'Mr C', Spent: '', 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>

如何在饼图和条形图标签中显示当前值，如在工具提示中？

How to display current values in pie chart & bar chart labels, like in tooltips?

dc.js