javascript - D3.js 饼图转换

Question

Here is a link to the CodePen

我有一个饼图，当设置更改时，它的数据也会更改(现在我的数据只是随机选取的，但我的官方文档正确地做到了这一点)。我的问题是我不明白使用转换更新饼图。

这是创建饼图的过程:

function createPieChart()
{
  var width = 320,
      height = 320,
      radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
  .range(["#0083CB", "#006BA5", "#00527f"]);

  var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

  var labelArc = d3.svg.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

  var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) { return d.population; });

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

  data = updateData();

  var g = svg.selectAll(".arc")
  .data(pie(data))
  .enter().append("g")
  .attr("class", "arc");

  g.append("path")
    .attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });

  g.append("text")
    .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.data.age; });

  function type(d) {
    d.population = +d.population;
    return d;
  }
}

这是我更新饼图的函数。我收到一个错误 ReferenceError: s is not Define ，该错误似乎来自 D3 库:

function updatePieChart()
{
  svg.selectAll("path").data(pie(data)).transition().duration(500)
    .attrTween("d", arcTween);
} 

以及 arcTween 函数:

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) { return arc(i(t));    };
}

任何帮助都会很棒。不幸的是，当我搜索时，我只找到了 donut 饼图。

谢谢。

Answer 1

我稍微修改了你的代码。看this了解进入、更新和退出选择如何工作的教程。另外，不要使用两个库。仅用 d3 即可满足您的要求。 希望这会有所帮助。

var data = [];
var targetDegree = [ "Associate degree", "Bachelors degree" ];

var width = 320,
      height = 320,
      radius = Math.min(width, height) / 2;

  var color = d3.scale.ordinal()
  .range(["#0083CB", "#006BA5", "#00527f"]);

  var arc = d3.svg.arc()
  .outerRadius(radius - 10)
  .innerRadius(0);

  var labelArc = d3.svg.arc()
  .outerRadius(radius - 40)
  .innerRadius(radius - 40);

  var pie = d3.layout.pie()
  .sort(null)
  .value(function(d) { return d.population; });

  var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
  .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");	
	
function updateData()
{	
	
  var outweigh = Math.random() * 100,
      not_outweigh = Math.random() * 100,
      same = Math.random() * 100;    

  var data = [
    { age: "outweigh", population: outweigh },
    { age: "does not", population: not_outweigh },
    { age: "same", population: same }
  ];

  return data;
}
updatePieChart();
	
function updateDegrees(s)
{
  var index = targetDegree.indexOf(s); // Check existence
  if (index > -1) // Already exists and needs to be removed
    targetDegree.splice(index, 1);
  else           // Doe snot exist so should be added
  {
	  targetDegree.push(s);
  }
  updatePieChart();
}

$("#bachelor_check").change(function() {
  updateDegrees("Bachelors degree");
});

$("#associate_check").change(function() {
  updateDegrees("Associate degree");
});

$('#majors_sel').on('change', function() {
  updatePieChart();
});

function updatePieChart()
{
	data = updateData();
	var g = svg.selectAll(".arc")
  .data(pie(data));

	var arcpaths = g.enter().append('g').attr('class','arc');
	
	arcpaths.append('path').attr("d", arc)
    		.style("fill", function(d) { return color(d.data.age); });
	arcpaths.append('text').attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
    		.attr("dy", ".35em")
    		.text(function(d) { return d.data.age; });
	
	
	g.exit().remove();	
	
	var arcpaths = g.select('path').attr("d", arc)
    .style("fill", function(d) { return color(d.data.age); });
	
	var arctext = g.select("text")
    .attr("transform", function(d) { return "translate(" + labelArc.centroid(d) + ")"; })
    .attr("dy", ".35em")
    .text(function(d) { return d.data.age; });
	

  function type(d) {
    d.population = +d.population;
    return d;
  }
} 


function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) { return arc(i(t));    };
}

.arc text {
    font: 10px sans-serif;
    text-anchor: middle;
  }

  .arc path {
    stroke: #fff;
  }

<script src="//d3js.org/d3.v3.min.js"></script>	
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<select id='majors_sel'>
    <option value="All">All majors</option>
    <option value="Engineering">Engineering</option>
    <option value="Life sciences">Life sciences</option>
    <option value="Physical sciences/math">Physical sciences/math</option>
    <option value="Health">Health</option>
    <option value="Education">Education</option>
    <option value="Business/management">Business/management</option>
    <option value="Computer/information sciences">Computer/information sciences</option>
    <option value="Law">Law</option>
    <option value="Social/behavioral sciences">Social/behavioral sciences</option>
    <option value="Humanities">Humanities</option>
    <option value="Vocational/technical training">Vocational/technical training</option>
    <option value="Undeclared">Undeclared</option>
    <option value="Other (Please specify):">Other</option>
  </select>

  <div id='degree_check'>
    <label>
      <input id='bachelor_check' type='checkbox' name='degree' value='Bachelors degree' checked>
    Bachelors</label>
    <label>
      <input id='associate_check' type='checkbox' name='degree' value='Associate degree' checked>
    Associate</label>
  </div>