D3単純な棒グラフが更新されない

Question

D3棒グラフが作成されていますが、更新方法は不明です。データそのものは更新されていますが、.enter()と.exit()のものを実行しようとすると、ほとんどの場合、私の.exit()関数が存在しないというエラーが発生します。私のポイントは、私のチャートのsvgを更新するための適切な方法が確実ではないということです。

私はcodepen hereを提供しましたが、すべての関連コードは以下のとおりです。

var b_margin = {top: 20, right: 20, bottom: 30, left: 100}, 
     b_width = 450 - b_margin.left - b_margin.right, 
     b_height = 200 - b_margin.top - b_margin.bottom; 

    var x = d3.scale.ordinal() 
     .rangeRoundBands([0, b_width], .1); 

    var y = d3.scale.linear() 
     .range([b_height, 0]); 

    var xAxis = d3.svg.axis() 
     .scale(x) 
     .orient("bottom"); 

    var yAxis = d3.svg.axis() 
     .scale(y) 
     .orient("left"); 

    var barsvg = d3.select("body").append("svg") 
     .attr("width", b_width + b_margin.left + b_margin.right) 
     .attr("height", b_height + b_margin.top + b_margin.bottom) 
     .append("g") 
     .attr("transform", "translate(" + b_margin.left + "," + b_margin.top + ")"); 

createBarChart = function() 
{ 
    x.domain(bardata.map(function(d) { return d.age; })); 
    y.domain([0, d3.max(bardata, function(d) { return d.population; })]); 

    barsvg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + b_height + ")") 
     .call(xAxis); 

    barsvg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    barsvg.selectAll(".bar") 
     .data(bardata) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.age) + 25; }) 
     .attr("width", x.rangeBand() - 50) 
     .attr("y", function(d) { return y(d.population); }) 
     .attr("height", function(d) { return b_height - y(d.population); }); 

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

updateBarChart = function() 
{ 
    // Bar chart svg update 
    bardata = [ 
    {age: "title1", population: 50}, 
    {age: "title2", population: 25}, 
    {age: "title3", population: 70} 
    ] 

    barsvg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + b_height + ")") 
     .call(xAxis); 

    barsvg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
    .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 6) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("Frequency"); 

    barsvg.selectAll(".bar") 
     .data(bardata) 
    .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.age) + 25; }) 
     .attr("width", x.rangeBand() - 50) 
     .attr("y", function(d) { return y(d.population); }) 
     .attr("height", function(d) { return b_height - y(d.population); }); 

    barsvg.exit().remove(); 

    barsvg.attr("y", function(d) { return y(d.value); }) 
     .attr("height", function(d) { return height - y(d.value); }); 
} 

EDITは：私のupdateBarData機能は次のようになります。

Answer 1

素晴らしいチュートリアルhere

アイデアは、まず、空の選択を作成し、そこにデータをバインドしています。

var bars = barsvg.selectAll(".bar") 
.data(bardata) // bars is empty but data is binded to it 

ここで、添付されたデータに基づいて要素を作成する必要があります。

var newBars = bars.enter(); // creates new elements 
newBars.apped("rect")......... // we do all the manipulation here 

古い要素を削除するには、我々は、出口の選択を使用し

var obsoletebars = bars.exit(); //contains excess bars 
obsoletebars.remove(); // removes them 

は、この情報がお役に立てば幸いです。

\t \t var b_margin = {top: 20, right: 20, bottom: 30, left: 100}, 
 
    b_width = 450 - b_margin.left - b_margin.right, 
 
    b_height = 200 - b_margin.top - b_margin.bottom; 
 

 
var x = d3.scale.ordinal() 
 
.rangeRoundBands([0, b_width], .1); 
 

 
var y = d3.scale.linear() 
 
.range([b_height, 0]); 
 

 
var xAxis = d3.svg.axis() 
 
.scale(x) 
 
.orient("bottom"); 
 

 
var yAxis = d3.svg.axis() 
 
.scale(y) 
 
.orient("left"); 
 

 
var barsvg = d3.select("body").append("svg") 
 
.attr("width", b_width + b_margin.left + b_margin.right) 
 
.attr("height", b_height + b_margin.top + b_margin.bottom) 
 
.append("g") 
 
.attr("transform", "translate(" + b_margin.left + "," + b_margin.top + ")"); 
 

 
var bardata = [ 
 
    { age: "Public", population: 50 }, 
 
    { age: "Private, for-profit", population: 100 }, 
 
    { age: "Nonprofit", population: 25 } 
 
]; 
 

 
createBarChart(); 
 

 
$('#btn').click(function() { 
 
    updateBarChart(); 
 
}); 
 

 
function createBarChart() 
 
{ 
 
    x.domain(bardata.map(function(d) { return d.age; })); 
 
    y.domain([0, d3.max(bardata, function(d) { return d.population; })]); 
 

 
    barsvg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + b_height + ")") 
 
    .call(xAxis); 
 

 
    barsvg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text("Frequency"); 
 

 
    barsvg.selectAll(".bar") 
 
    .data(bardata) 
 
    .enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { return x(d.age) + 25; }) 
 
    .attr("width", x.rangeBand() - 50) 
 
    .attr("y", function(d) { return y(d.population); }) 
 
    .attr("height", function(d) { return b_height - y(d.population); }); 
 

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

 
function updateBarChart() 
 
{ 
 
\t 
 
var random = function() { return Math.floor(Math.random() * 70) + 30 }; \t 
 
    // Bar chart svg update 
 
    bardata = [ 
 
    { age: "Public", population: random() }, 
 
    { age: "Private, for-profit", population: random() }, 
 
    { age: "Nonprofit", population: random() } 
 
]; 
 

 
    barsvg.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + b_height + ")") 
 
    .call(xAxis); 
 

 
    barsvg.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text("Frequency"); 
 

 
    var bars = barsvg.selectAll(".bar") 
 
    .data(bardata); 
 
\t 
 
    bars.enter().append("rect") 
 
    .attr("class", "bar") 
 
    .attr("x", function(d) { return x(d.age) + 25; }) 
 
    .attr("width", x.rangeBand() - 50) 
 
    .attr("y", function(d) { return y(d.population); }) 
 
    .attr("height", function(d) { return b_height - y(d.population); }); 
 

 
    bars.exit().remove(); \t 
 
\t 
 
    bars.attr("y", function(d) { 
 
\t return y(d.population); }) 
 
    .attr("height", function(d) { return b_height - y(d.population); }); 
 
}

#btn { 
 
    border: 2px solid #212121; 
 
    width: 150px; 
 
    text-align: center; 
 
    padding: 15px; 
 
    cursor: pointer; 
 
}

<script src="https://d3js.org/d3.v3.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<div id='btn'>Update</div> \t

Answer 2

D3は、新しいバーを書き換える必要はありません。ちょうど更新時に次の操作を行います

updateBarChart = function() 
 
{ 
 
    // Bar chart svg update 
 
    bardata = [ 
 
    {age: "title1", population: 50}, 
 
    {age: "title2", population: 25}, 
 
    {age: "title3", population: 70} 
 
    ] 
 

 
    barsvg.selectAll(".bar") 
 
     .data(bardata) 
 
     .attr("x", function(d) { return x(d.age) + 25; }) 
 
     .attr("width", x.rangeBand() - 50) 
 
     .attr("y", function(d) { return y(d.population); }) 
 
     .attr("height", function(d) { return b_height - y(d.population); }); 
 
}