Question

因此，当按下按钮时，我一直试图让我的d3.js条形图转换为不同的值。虽然，目前有些元素似乎正在增加，但是极其广泛且遍布整个地方，以及之前的元素未被删除。

这是我的代码：

function updateData(time) {

timeValue = time;


// Get the data again
d3.tsv(timeValue + ".tsv", function(error, data) {
  x.domain(data.map(function(d) { return d.letter; }));
  y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
// Scale the range of the data again 
x.domain(d3.extent(data, function(d) { return d.letter; }));
y.domain([0, d3.max(data, function(d) { return d.frequency; })]); 

//Selecting Data
var bars = svg.selectAll("rect")
         .data(data);


//Removing
bars.exit().remove("rect");

//Changes
bars.enter().append('rect')
.attr("class", "bar")
bars.attr('x', function(d) { return x(d.letter); })
.attr('width', x.rangeBand())
.attr('y', function(d) { return y(d.frequency); })
.attr("height", function(d) { return height - y(d.frequency); }); 
 //var svg = d3.select("div.innerScreen2").transition();        
});

现在我已经查看了类似的问题，并尝试应用解决方案，但似乎没有删除或更改：/也许我的代码在错误的地方？任何帮助将不胜感激

Answer 1

您的问题有两个问题需要解决。第一个问题与更新模式有关，即添加了一些元素而某些元素没有添加。您的数据集中是否有唯一标识符？如果是，您可以在更新过程中使用函数：

// Join new data with old elements, if any.
var text = svg.selectAll("text")
      .data(data, function(d) { return d.id; });

来源：http://bl.ocks.org/mbostock/3808234

第二个问题与您的x / y位置有关，可能取决于您的基础数据。需要数据摘录或调试信息来解决此问题。

D3.js - 使用按钮更新条形图数据

1 个答案: