dc.js: 如何使用不同的输入阈值改变饼图中的数据分布?
dc.js: How to change the data distribution in pie chart using different input threshold?
我想使用输入字段中的分数来更改饼图中的数据分布。
例如,scoreThreshold 为 0.5 的分布“71% 高/28% 低”将更改为 scoreThreshold 为 0.7 的“42% 高/57% 低”。
我做了这个例子here,但结果并不令人满意:在输入字段中键入 0.5 并单击 "check!" 时,饼图分布没有改变。
这决定了分配:
//## pie chart
var coreCount = ndx.dimension(function (d) {
var maxNumber=80;
if (typeof scoreThreshold!='number') {scoreThreshold=0.5}
//console.log(scoreThreshold)
if (d.scores >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
我想更新 coreCount 函数以使用输入分数阈值重新分配分布。但它不起作用:
$('#scoreThresholdBt').click(function () {
scoreThreshold=document.getElementById('scoreThreshold').value
scoreThreshold=parseFloat(scoreThreshold);
console.log(scoreThreshold,typeof scoreThreshold);
function redo_coreCount () {
var coreCount = ndx.dimension(function (d) {
var maxNumber=80;
console.log(scoreThreshold);
if (d.count >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
}; redo_coreCount();
coreCount.group();/**/
dc.renderAll();
dc.redrawAll();
});
如何实现这个功能?
非常感谢任何帮助。
您实质上是将新维度放在一个临时变量中,该变量会立即被丢弃。点击函数中的coreCount
与全局同名变量无关。
同样,coreCount.group()
不是一个动作;它正在构建一个组对象,如果您不使用它也会丢失。
您需要将新的维度和组分配给您的图表,因为它不跟踪全局或本地的值 coreCount
。
因此,让我们根据从输入中读取分数阈值,将函数更改为 return 一个新维度:
function coreCount_from_threshold() {
var scoreThreshold=document.getElementById('scoreThreshold').value;
scoreThreshold=parseFloat(scoreThreshold);
console.log(scoreThreshold,typeof scoreThreshold);
if (isNaN(scoreThreshold)) {scoreThreshold=0.5}
return ndx.dimension(function (d) {
var maxNumber=80;
if (d.scores >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
}
注意这里需要用到isNaN
,因为typeof NaN === 'number'
我们可以在初始化时同时使用它:
var coreCount = coreCount_from_threshold();
点击后:
$('#scoreThresholdBt').click(function () {
coreCount.dispose();
coreCount = coreCount_from_threshold();
coreCountGroup = coreCount.group();
coreYesNoPieChart
.dimension(coreCount)
.group(coreCountGroup);
dc.redrawAll();
});
请注意,我们分配给相同的全局变量 coreCount
和 coreCountGroup
(因为我们在这里不使用 var
)。我们先把旧的维度处理掉,否则它会继续过滤,占用资源。然后我们将新维度和组分配给图表(否则它不会知道它们)。
我们只需要在这里重绘(而不是渲染),因为 dc.js 图表可以在获得新数据时更新。
这是一个有效的 fork of your fiddle。
我想使用输入字段中的分数来更改饼图中的数据分布。
例如,scoreThreshold 为 0.5 的分布“71% 高/28% 低”将更改为 scoreThreshold 为 0.7 的“42% 高/57% 低”。
我做了这个例子here,但结果并不令人满意:在输入字段中键入 0.5 并单击 "check!" 时,饼图分布没有改变。
这决定了分配:
//## pie chart
var coreCount = ndx.dimension(function (d) {
var maxNumber=80;
if (typeof scoreThreshold!='number') {scoreThreshold=0.5}
//console.log(scoreThreshold)
if (d.scores >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
我想更新 coreCount 函数以使用输入分数阈值重新分配分布。但它不起作用:
$('#scoreThresholdBt').click(function () {
scoreThreshold=document.getElementById('scoreThreshold').value
scoreThreshold=parseFloat(scoreThreshold);
console.log(scoreThreshold,typeof scoreThreshold);
function redo_coreCount () {
var coreCount = ndx.dimension(function (d) {
var maxNumber=80;
console.log(scoreThreshold);
if (d.count >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
}; redo_coreCount();
coreCount.group();/**/
dc.renderAll();
dc.redrawAll();
});
如何实现这个功能? 非常感谢任何帮助。
您实质上是将新维度放在一个临时变量中,该变量会立即被丢弃。点击函数中的coreCount
与全局同名变量无关。
同样,coreCount.group()
不是一个动作;它正在构建一个组对象,如果您不使用它也会丢失。
您需要将新的维度和组分配给您的图表,因为它不跟踪全局或本地的值 coreCount
。
因此,让我们根据从输入中读取分数阈值,将函数更改为 return 一个新维度:
function coreCount_from_threshold() {
var scoreThreshold=document.getElementById('scoreThreshold').value;
scoreThreshold=parseFloat(scoreThreshold);
console.log(scoreThreshold,typeof scoreThreshold);
if (isNaN(scoreThreshold)) {scoreThreshold=0.5}
return ndx.dimension(function (d) {
var maxNumber=80;
if (d.scores >maxNumber*scoreThreshold)
{return 'High';}
else {return 'Low';}
});
}
注意这里需要用到isNaN
,因为typeof NaN === 'number'
我们可以在初始化时同时使用它:
var coreCount = coreCount_from_threshold();
点击后:
$('#scoreThresholdBt').click(function () {
coreCount.dispose();
coreCount = coreCount_from_threshold();
coreCountGroup = coreCount.group();
coreYesNoPieChart
.dimension(coreCount)
.group(coreCountGroup);
dc.redrawAll();
});
请注意,我们分配给相同的全局变量 coreCount
和 coreCountGroup
(因为我们在这里不使用 var
)。我们先把旧的维度处理掉,否则它会继续过滤,占用资源。然后我们将新维度和组分配给图表(否则它不会知道它们)。
我们只需要在这里重绘(而不是渲染),因为 dc.js 图表可以在获得新数据时更新。
这是一个有效的 fork of your fiddle。