如何在 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 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').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 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")&nbsp; .append("svg")&nbsp; .attr("width", width)&nbsp; .attr("height", height)&nbsp; .append("g")&nbsp; .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");// set the color scalevar color = d3.scaleOrdinal()&nbsp; .domain(["a", "b", "c", "d"])&nbsp; .range(d3.schemeDark2);// A function that create / update the plot for a given variable:function update() {&nbsp; var data = [];&nbsp; d3.selectAll('.fuel').each(function() {&nbsp; &nbsp; data.push(+this.value || 0);&nbsp; });&nbsp; var pie = d3.pie()&nbsp; &nbsp; (data);&nbsp; var u = svg.selectAll("path")&nbsp; &nbsp; .data(pie)&nbsp; // Build the pie chart: Basically, each part of the pie is a path that we build using the arc function.&nbsp; u.enter()&nbsp; &nbsp; .append('path')&nbsp;&nbsp; &nbsp; .merge(u)&nbsp; &nbsp; .transition()&nbsp; &nbsp; .duration(5000)&nbsp; &nbsp; .attr('d', d3.arc()&nbsp; &nbsp; &nbsp; .innerRadius(0)&nbsp; &nbsp; &nbsp; .outerRadius(radius)&nbsp; &nbsp; )&nbsp; &nbsp; .attr('fill', function(d) {&nbsp; &nbsp; &nbsp; return (color(d.data.key))&nbsp; &nbsp; })&nbsp; &nbsp; .attr("stroke", "white")&nbsp; &nbsp; .style("stroke-width", "2px")&nbsp; &nbsp; .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>&nbsp; <input type="number" class="fuel" style="text-align:center"></td><td>&nbsp; <input type="number" class="fuel" style="text-align:center"></td><td>&nbsp; <input type="number" class="fuel" style="text-align:center"></td><!-- Add&nbsp; button --><button onclick="update()">Update</button><!-- Create a div where the graph will take place --><div id="my_dataviz"></div>