javascript - dc.js:如何使用不同的输入阈值更改饼图中的数据分布？

Question

我想使用输入字段中的分数来更改饼图中的数据分布。

例如，scoreThreshold 0.5 的分布“71% High/28% Low”将更改为 ScoreThreshold 0.7 的“42% High/57% Low”。

我做了这个例子here ，但结果并不令人满意:当在输入字段中输入 0.5 并单击“检查!”时，饼图分布没有变化。

这决定了分布:

//##  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();
        });

如何实现这个功能呢？ 我真的很感谢任何帮助。

Answer 1

您实际上是将新维度放入一个临时变量中，该变量会立即被丢弃。 click函数中的coreCount与全局级别的同名变量无关。

同样，coreCount.group() 不是一个 Action ；它正在构造一个组对象，如果您不使用它，该对象也会丢失。

您需要将新的维度和组分配给图表，因为它不跟踪全局或本地 coreCount 的值。

因此，让我们更改函数以根据从输入读取分数阈值返回新维度:

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 .