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

Question

我正在尝试使用 D3.js 创建一个包含 3 个饼图切片的饼图。我想用键盘输入值，并且更新值时（单击按钮时）的过渡应该平滑，这就是我使用 merge() 和 transition() 的原因。换句话说，我想做的是调整这个给定示例中的代码：https://www.d3-graph-gallery.com/graph/pie_changeData.html不同之处在于，我希望能够手动输入值，而不是将它们放在代码中（最好总是 3 个饼图切片）。由于某种原因，我无法真正适应代码。提前致谢。// set the dimensions and margins of the graphvar width = 450height = 450margin = 40// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.var radius = Math.min(width, height) / 2 - margin// append the svg object to the div called 'my_dataviz'var svg = d3.select("#my_dataviz")  .append("svg")  .attr("width", width)  .attr("height", height)  .append("g")  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");// set the color scalevar color = d3.scaleOrdinal()  .domain(["a", "b", "c", "d"])  .range(d3.schemeDark2);// A function that create / update the plot for a given variable:function update() {  var data = d3.selectAll('.fuel').nodes();  var pie = d3.pie() //we create this variable, for the values to be readeable in the console    .value(function(d) {      return d.innerHTML;    })(data);  var u = svg.selectAll("path")    .data(pie)  // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.  u.enter()    .append('path')    .merge(u)    .transition()    .duration(5000)    .attr('d', d3.arc()      .innerRadius(0)      .outerRadius(radius)    )    .attr('fill', function(d) {      return (color(d.data.key))    })    .attr("stroke", "white")    .style("stroke-width", "2px")    .style("opacity", 1)}<meta charset="utf-8"><!-- Load d3.js --><script src="https://d3js.org/d3.v4.js"></script><!-- Color scale --><script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

Answer 1

要访问输入框中的值，请使用this.value, not this.innerHtml，其中this指向相关 DOM 节点：

// set the dimensions and margins of the graph

var width = 450

height = 450

margin = 40

// The radius of the pieplot is half the width or half the height (smallest one). I subtract a bit of margin.

var radius = Math.min(width, height) / 2 - margin

// append the svg object to the div called 'my_dataviz'

var svg = d3.select("#my_dataviz")

  .append("svg")

  .attr("width", width)

  .attr("height", height)

  .append("g")

  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// set the color scale

var color = d3.scaleOrdinal()

  .domain(["a", "b", "c", "d"])

  .range(d3.schemeDark2);

// A function that create / update the plot for a given variable:

function update() {

  var data = [];

  d3.selectAll('.fuel').each(function() {

    data.push(+this.value || 0);

  });

  var pie = d3.pie()

    (data);

  var u = svg.selectAll("path")

    .data(pie)

  // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.

  u.enter()

    .append('path') 

    .merge(u)

    .transition()

    .duration(5000)

    .attr('d', d3.arc()

      .innerRadius(0)

      .outerRadius(radius)

    )

    .attr('fill', function(d) {

      return (color(d.data.key))

    })

    .attr("stroke", "white")

    .style("stroke-width", "2px")

    .style("opacity", 1)

}

<meta charset="utf-8">

<!-- Load d3.js -->

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

<!-- Color scale -->

<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Create 3 cells for the input -->

<td>

  <input type="number" class="fuel" style="text-align:center">

</td>

<td>

  <input type="number" class="fuel" style="text-align:center">

</td>

<td>

  <input type="number" class="fuel" style="text-align:center">

</td>

<!-- Add  button -->

<button onclick="update()">Update</button>

<!-- Create a div where the graph will take place -->

<div id="my_dataviz"></div>