javascript - 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); });
}

编辑:我的 updateBarData 函数如下所示:

Answer 1

很棒的教程here

想法是，首先创建一个空选择并将数据绑定(bind)到它。

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

希望这有帮助。

		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()
{
	
var random = function() { return Math.floor(Math.random() * 70) + 30 };	
  // 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);
	
    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();	
	
  bars.attr("y", function(d) { 
	  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>