Question

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

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

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

  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包含需要放在白色圆形空间中的饼图圆之间的总客户总和。

Answer 1

使用d3（您当前正在使用）将文本元素附加到svg饼图。只需选择标签，然后将元素添加到标签即可。您也可以使用<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

1 个答案: