Javascript 如何在d3.js中创建饼图可视化，手动输入并平滑过渡

我正在尝试使用D3.js创建一个包含3个饼图切片的饼图。我想用键盘输入值，更新值时（单击按钮时）的转换应该是平滑的，这就是为什么我使用merge（）和transition（）

换句话说，我要做的是调整给定示例中的代码：

不同之处在于，我希望能够手动输入值，而不是在代码中输入值（始终是3个饼图切片就可以了）

由于某些原因，我无法真正修改代码。提前谢谢

//设置图形的尺寸和边距
可变宽度=450
高度=450
保证金=40
//pieplot的半径为宽度的一半或高度的一半（最小值）。我减去一点边距。
变量半径=数学最小值（宽度、高度）/2-边距
//将svg对象附加到名为“my_dataviz”的div中
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//设置颜色比例
var color=d3.scaleOrdinal（）
.域名（[“a”、“b”、“c”、“d”]）
.范围（d3.schemeDark2）；
//为给定变量创建/更新绘图的函数：
函数更新（）{
var data=d3.selectAll（'.fuel'）.nodes（）；
var pie=d3.pie（）//我们创建这个变量，使值在控制台中可读
.价值（功能（d）{
返回d.innerHTML；
})（数据）；
var u=svg.selectAll（“路径”）
.数据（pie）
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
u、 输入（）
.append（'路径'）
.合并（u）
.transition（）
.持续时间（5000）
.attr（'d'，d3.arc（）
.内半径（0）
.外部（半径）
)
.attr（'fill'，函数（d）{
返回（颜色（d.data.key））
})
.attr（“笔划”、“白色”）
.style（“笔划宽度”、“2px”）
.style（“不透明度”，1）
}

更新

要访问输入框中的值，请使用

this.value

，而不是

this.innerHtml

，其中

this

指向相关的DOM节点：

//设置图形的尺寸和边距
可变宽度=450
高度=450
保证金=40
//pieplot的半径为宽度的一半或高度的一半（最小值）。我减去一点边距。
变量半径=数学最小值（宽度、高度）/2-边距
//将svg对象附加到名为“my_dataviz”的div中
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//设置颜色比例
var color=d3.scaleOrdinal（）
.域名（[“a”、“b”、“c”、“d”]）
.范围（d3.schemeDark2）；
//为给定变量创建/更新绘图的函数：
函数更新（）{
var数据=[]；
d3.选择全部（'.fuel'）。每个（函数（）{
data.push（+this.value | | 0）；
});
var pie=d3.pie（）
（数据）；
var u=svg.selectAll（“路径”）
.数据（pie）
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
u、 输入（）
.append（'路径'）
.合并（u）
.transition（）
.持续时间（5000）
.attr（'d'，d3.arc（）
.内半径（0）
.外部（半径）
)
.attr（'fill'，函数（d）{
返回（颜色（d.data.key））
})
.attr（“笔划”、“白色”）
.style（“笔划宽度”、“2px”）
.style（“不透明度”，1）
}

更新