Javascript 如何实现d3.js中图形的html变量

我想在d3.js中做一个甜甜圈图表。基本上，想法是编写3个输入，并应以如下方式显示：

不幸的是，我不能做到这一点，我不确定如何在javascript代码中实现变量fuel、fuel 2和fuel 3，我不确定是在html代码中还是在javascript代码中指明。提前谢谢

<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<div>
        <input type="number" id="fuel" style="text-align:center"> 
</div>  

<div>
        <input type="number" id="fuel2" style="text-align:center"> 
</div>  

<div>
        <input type="number" id="fuel3" style="text-align:center"> 
</div>  




<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

这个答案使用d3v6

方法1

您可以使用数据数组来表示输入框和切片。这可能有好处，尤其是从数据源加载图表时。尝试以下方法：

// Date representing your slices:
var data = [
  {name:"A",value:1},
  {name:"B",value:1},
  {name:"B",value:1}
];

// Create the fields based on the data:
d3.select("#my_inputs")
  .selectAll(null)
  .data(data)
  .enter()
  .append("input")
  .attr("value",function(d) { return d.value; })
  .on("keyup", function(_,d) { 
    d.value = d3.select(this).node().value;
    update();
  })

这里我们创建一个数据数组来表示输入字段和切片。我们将数据绑定到输入字段，并在字段值每次更改时更新绑定的数据

现在，我们可以在每次值更改时更新图表，最初使用如下函数：

function update() {

  var pie = d3.pie()
    .value(function(d) {return d.value; })(data);

  svg
   .selectAll('path')
    .data(pie)
    .join('path') 
    .attr(.....
    
}

我在下面做了一些修改，因为我们需要注意的是，如果切片的数量不变，那么在第一次绘制切片后，enter选择将为空。因此，我使用

selection.join（）

尽管

selection.merge（）

单独处理update和enter也可以

以下是这两种情况：

var宽度=450
高度=450
保证金=40
变量半径=数学最小值（宽度、高度）/2-边距
//表示切片的日期：
风险值数据=[
{name:“A”，值：1}，
{名称：“B”，值：1}，
{名称：“C”，值：1}
];
//根据数据创建字段：
d3.选择（“我的输入”）
.selectAll（空）
.数据（数据）
.输入（）
.append（“输入”）
.attr（“value”，函数（d）{返回d.value；}）
.on（“keyup”，函数（u，d）{
d、 value=d3.选择（this）.node（）.value；
更新（）；
})
//创建SVG
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.附加（“g”）
.attr（“变换”、“平移”（+width/2+）、“+height/2+”）；
//设置颜色比例
var color=d3.scaleOrdinal（）
.domain（data.map（函数（d）{返回d.name；}））
.范围（[“#98abc5”、“#8a89a6”、“#7b6888”]）
更新（）；
函数更新（）{
//计算每个组在饼图上的位置：
var pie=d3.pie（）
.value（函数（d）{返回d.value；}）（数据）；
//构建饼图：基本上，饼图的每个部分都是我们使用arc函数构建的路径。
svg
.selectAll（'路径'）
.数据（pie）
.join（'路径'）
.attr（'d'，d3.arc（）
.内半径（100）
.外部（半径）
)
.attr（“笔划”、“黑色”）
.style（“笔划宽度”、“2px”）
.style（“fill”，函数（d）{返回颜色（d.data.name）；}）
}

简直太棒了。我可以问一下这个变量派是干什么的吗？我把：

var-pie=d3.pie（）.value（函数（d）{return d.value；}）var-data\u-ready=pie（d3.entries（data））

压缩为：

var-pie=d3.pie（）.value（函数（d）{return d.value；}）（data）

，所以

pie

替换代码段中的

data\u-ready

，我们仍然需要将其传递给

selectAll（）.data（）

。

function update() {

  var pie = d3.pie()
    .value(function(d) {return d.value; })(data);

  svg
   .selectAll('path')
    .data(pie)
    .join('path') 
    .attr(.....
    
}