如何使用 dc.js 在饼图中心显示值

Question

我使用 dc.js 创建了一个饼图，看起来像这样

这里我想在圆形白色 space 区域中显示饼图之间的一些值。我还没有找到与此相关的任何示例。

我正在下面添加我的代码。谢谢。

  let data = [
    {
        productCount: 1,
        customer : 200 
    },
    {
        productCount: 2,
        customer : 100 
    },
    {
        productCount: 3,
        customer : 300 
    },
    {
        productCount: 4,
        customer : 400 
    },
    {
        productCount: 5,
        customer : 560 
    },
    {
        productCount: 6,
        customer : 2100 
    },
]

            let totalCustomerArray = data.map(data => data.customer);
            let totalCustomer = totalCustomerArray.reduce((a, b) => a + b);
            let ndx = crossfilter(data);
            let all = ndx.groupAll();

            let productCountDimension = ndx.dimension(d => d.productCount);
            let groupCustomer = productCountDimension.group().reduceSum(d => d.customer);

            const pie = dc.pieChart('.pie-chart');
            pie
                .width(400)
                .height(400)
                .radius(140)
                .innerRadius(90)
                .dimension(productCountDimension)
                .group(groupCustomer)
                .on('pretransition', (chart) => {
                    pie.selectAll('text.pie-slice').text(d =>  (
                    dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2 * Math.PI) * 100) + '%'
                    ))
                })

            pie.render();

在上面第二行的代码中，变量名 totalCustomer 包含需要放置在白色圆形饼图圆圈之间的客户总和 space。

Answer 1

使用 d3（您当前正在使用）将文本元素附加到 svg 饼图。只是 select 标签，然后将元素附加到它。您也可以使用 <tpsan></tspan>

var svg = d3.select("svg"); // select the svg element where you are putting your pie chart.
svg.append("text") // appent the "text" element
  .attr("x", 220) // x position
  .attr("y", 220) // y position
  .text("1234") // the text content

如何使用 dc.js 在饼图中心显示值

How to show value in center of pie chart using dc.js

javascript

crossfilter

dc.js