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 defined выйти из Lib 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)); }; 
} 

Любая помощь будет большим. К сожалению, когда я ищу, я нахожу только графические диаграммы пончиков.

спасибо.

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 + ")"); \t 
 
\t 
 
function updateData() 
 
{ \t 
 
\t 
 
    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(); 
 
\t 
 
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 
 
    { 
 
\t 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() 
 
{ 
 
\t data = updateData(); 
 
\t var g = svg.selectAll(".arc") 
 
    .data(pie(data)); 
 

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

 
    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> \t 
 
<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>