Javascript D3.js：动态更改条形图

我现在已经尝试了很多D3.js，我有一个条形图，我必须在点击按钮时动态刷新它

但是，我已经将它封装在一个函数中，该函数似乎不起作用

问题是什么？如何解决

代码：

更新：

month   popularity
January 73
February    72
March   70
April   69
May 62
June    57
July    64
August  66
September   72
October 77
November    78
December    77

---

首先，输入数据时需要设置一个ID：

var pops= svg.selectAll(".bar")
  .data(data, function(d,i){ return d.month; // this value most be an Id for each node })
pops.enter().append("rect"); // newest nodes
update(); // updates nodes 
pops.exit().remove(); // remove exits nodes

然后，您需要在更新viz的所有值时生成一个函数

function update(){
   pops
    .attr("width", x)
    .attr("fill", "#010")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.month); })
    .attr("width", x.rangeBand())
    .attr("y", height - 1)
    .attr("height", 1);
}

---

这是一个了解数据输入和更新之间差异的示例。当您为d3设置“.data（data，function（d，i）{return d.ID；}）”作为未来更新的ID时，这一点非常重要。

我一眼就能看出两个问题：

• 您仅在

  输入

  选项中进行转换：

//pops仅包含“输入选择”（=新元素）
var pops=svg.selectAll（“.bar”）
.数据（数据）
.enter（）.append（“rect”）
//因此，转换将仅在“输入选择”上进行
pops.transition（）。。。

您应该分两步进行：

• 每次更新时都会重新创建轴

您应该创建它们一次，只需在

updateChart

启动时：

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

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

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    .tickFormat(d3.format("s"));

var gXAxis = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

var gYAxis =  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

更新时：

// Update domains
x.domain(data.map(function(d) { return d.month; }));
y.domain([0, 45]);
// Update axis
gXAxis.call(xAxis);
gYAxis.call(yAxis);
// You could even handle it smoothly via a transition: 
// gXAxis.transition().call(xAxis);
// gYAxis.transition().call(yAxis);

---

我只看到您已经定义了

。输入
，但您还需要
。更新
和
。退出
来处理更新的数据如何添加它们@你能提供原始和更新的数据吗？太好了！但是如何停止重建x轴和y轴呢？如果我删除了创建它们的代码并将它们放在函数外，它们的格式就不正确检查我的更新，我会详细介绍更新函数中必须包含的内容非常感谢！但我的代码中仍然存在一个问题，我无法解决它。一旦设置颜色，即使值为。。。为什么会这样？我已经在更新中附加了
fill
部分…你能在你的帖子中更新你的代码吗？我只能看到这一行：.attr（“fill”，“#010”）。您使用的是静态颜色，不取决于数据。不客气：）顺便说一句，您应该阅读以下内容：
function update(){
   pops
    .attr("width", x)
    .attr("fill", "#010")
    .attr("class", "bar")
    .attr("x", function(d) { return x(d.month); })
    .attr("width", x.rangeBand())
    .attr("y", height - 1)
    .attr("height", 1);
}

// pops now contains the 'update selection' (=existing elements)
  var pops= svg.selectAll(".bar")
      .data(data);
// 'enter().append' creates elements but also add them automatically to the 'update selection'
  pops.enter().append("rect");

// Here attributes will apply on the 'enter + update selection' (=all elements)
  pops.attr("width", x)
      .attr("fill", function(d) {
        if (d.popularity> 30) {
           return "#010";
        else  
           return "000"; 
       })
      .attr("class", "bar")
      .attr("x", function(d) { return x(d.month); })
      .attr("width", x.rangeBand())
      .attr("y", height - 1)
      .attr("height", 1);

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

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

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

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .ticks(10)
    .tickFormat(d3.format("s"));

var gXAxis = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

var gYAxis =  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

// Update domains
x.domain(data.map(function(d) { return d.month; }));
y.domain([0, 45]);
// Update axis
gXAxis.call(xAxis);
gYAxis.call(yAxis);
// You could even handle it smoothly via a transition: 
// gXAxis.transition().call(xAxis);
// gYAxis.transition().call(yAxis);