javascript - 用户输入创建 D3 饼图

Question

我正在尝试使用 d3pie.js 用户输入值创建饼图。下面是我的代码，它可以正常工作，但在单击按钮时会获取随机数。

但我不希望从用户输入字段中获取新的段值。我尝试将 jquery 函数分配给一个变量，然后将该变量分配给如下所示的值，但这不起作用。我也尝试过直接定义Jquery函数来定义值。

尝试 1(未成功):

var a = $("#first").val();
var num = 4;

$("#addData").on("click", function() {

adata.push({
  label: num.toString(),
  value: a
});

pie.updateProp("data.content", adata);
num++;

尝试 2(未成功):

adata.push({
label: num.toString(),
value: $("#first").val()
});

下面是我的工作代码，非常感谢人们对此的一些意见。

var adata = [
        {
            "label": "JavaScript",
            "value": 5,         
        },
        {
            "label": "Ruby",
            "value": 3,             
        },
        {
            "label": "Java",
            "value": 2,             
        }   
    ];
--------------------
"data": {
    "sortOrder": "value-desc",
    "content": adata
--------------------
var num = 4;
$("#addData").on("click", function() {
adata.push({
  label: num.toString(),
  value: Math.floor(Math.random() * 10) + 1
});
pie.updateProp("data.content", adata);
num++;

--------------------
<input type="text" class="form-control" id="first">
<button type="button" class="btn btn-default" id="addData">Add Value</button>

Answer 1

问题是因为您在 value 中传递一个字符串，它需要一个数字。

在你的代码中

adata.push({
  label: num.toString(),
  value: a //incorrect it has to be a number.
});

需要做

 adata.push({
  label: num.toString(),
  value: +$("#first").val() //make it a number so + is appended.
});

工作代码here