Javascript 将百分比添加到dc.js中的饼图标签_Javascript_D3.js_Dc.js_Crossfilter

Javascript 将百分比添加到dc.js中的饼图标签

javascript d3.js

Javascript 将百分比添加到dc.js中的饼图标签,javascript,d3.js,dc.js,crossfilter,Javascript,D3.js,Dc.js,Crossfilter,我有一个饼图，我想在标签上添加百分比。下面是饼图的一个示例，代码如下。现在，图表显示了实际值。我看了一下，这是仪表板的一个示例。它有一个标签上有百分比的图表。然而，当我尝试复制结构时，我得到了一个错误。例如，当我像这样使用label函数时 .label(function(d) {if(all.value){return d.key + " " + d.value / all.value();} .renderLabel(true) 在控制台中，它表示未定义所有内容。另外，d.key也不返回任何

我有一个饼图，我想在标签上添加百分比。下面是饼图的一个示例，代码如下。现在，图表显示了实际值。我看了一下，这是仪表板的一个示例。它有一个标签上有百分比的图表。然而，当我尝试复制结构时，我得到了一个错误。例如，当我像这样使用label函数时

.label(function(d) {if(all.value){return d.key + " " + d.value / all.value();}
.renderLabel(true)

在控制台中，它表示未定义所有内容。另外，

d.key

也不返回任何内容。我想我的数据有不同的结构。谢谢你的帮助。谢谢

HTML

<body>
    <div id='Chart'>
    </div>
</body>

数据

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];

你很接近！在这种情况下，我建议您执行以下操作：

.label(function(d) {
    console.log(JSON.stringify(d));
})

了解数据的结构。如果这样做，您将看到

键

和

值

位于

d.data

下，因此您可以使用如下标签

.label(function(d) {
    return d.data.key + ' ' + d.data.value + '%';
})

如果只想计算所显示圆的分数，可以使用

startAngle

和

endAngle

属性

.label(function(d) {
    return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});

（d.endAngle-d.startAngle）

将给出切片显示的弧度数，因此您可以通过除以圆中的弧度数来计算百分比。

事实上，它没有d.data。而是使用.renderlet（）： :

.label

是正确的修改方式，但饼图有缺陷，通过登录d进行检查

.label(d => {
    console.log(d);
    // {
    //  key: 'which you return in dimension',
    //  value: 'ex: 259.91'
    // }
})

例如，数组中有6个对象，但日志中可能只有3或4个对象@@ 来解决这个错误

.on('pretransition', function(chart){
    chart.selectAll('text.pie-slice').text(d => {
        console.log(d);
        // {
        //  data: {
        //      key: 'which you return in dimension',
        //      value: 'ex: 259.91'
        //  },
        //  endAngle: 'xxx',
        //  startAngle: 'yyy'
        // }
    })
})

通过这种方式，我们可以在数组中记录足够的6个对象标签文本在

text（d=>{}）

log（JSON.stringify（d））非常有用。谢谢然而，我必须计算百分比，因为到目前为止，我只有计数。即使使用控制台日志，我也没有在数据中找到获取百分比所需的all.value（），除非有其他方法。你回答了我关于如何连接键和值的问题，但百分比部分是最重要的部分。编辑内容包括如何检查圆圈显示的百分比。哇，这实际上是一个聪明的解决方案。我所做的只是使用

数据

对象的长度，然后除以它，但是您的方法更可靠。谢谢希望他们能把它变成一个函数或什么的，这样它的工作量就少了。

.label（function（d）

没有

d.data

它只有

d.key

.label(d => {
    console.log(d);
    // {
    //  key: 'which you return in dimension',
    //  value: 'ex: 259.91'
    // }
})

.on('pretransition', function(chart){
    chart.selectAll('text.pie-slice').text(d => {
        console.log(d);
        // {
        //  data: {
        //      key: 'which you return in dimension',
        //      value: 'ex: 259.91'
        //  },
        //  endAngle: 'xxx',
        //  startAngle: 'yyy'
        // }
    })
})

chart.selectAll('text.pie-slice').text(function(d){
    let label = d.data.key;
    return label + ': ' + Number(d.data.value).toFixed(2);
})

//Or play with percentage
chart.selectAll('text.pie-slice').text(function(d){
    return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})