d3重新绘制带有新值的条形图

Question

当第一次加载页面时，我的条形图绘制得很好。

但是，从下拉菜单中选择2小时，并且它不希望升级到2点小时的数据，它只是不断显示小时1

FIDDLE

这是我的D3和JS：

$('#bar_chart').css('overflow-x','scroll'); 

var margin = {top: 20, right: 20, bottom: 40, left: 80}, 
    width = 220 - margin.left - margin.right, 
    height = 233 - margin.top - margin.bottom; 

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

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

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

var formatComma = d3.format('0,000'); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient('left') 
    .ticks(5) 
    .outerTickSize(0) 
    .tickFormat(formatComma); 


var svg = d3.select('th.chart-here').append('svg') 
    .attr('viewBox', '0 0 220 233') 
    .attr('preserveAspectRatio','xMinYMin meet') 
    .attr('width', width + margin.left + margin.right) 
    .attr('height', height + margin.top + margin.bottom) 
    .append('g') 
    .attr('transform', 'translate(' + margin.left/1.5 + ',' + margin.top/1.5 + ')'); 


var table_i = 0; 

var arr1 = 
[ 
{'hour':1,'car':[{'audi':1377},{'bmw':716},{'ford':3819},{'mazda':67},{'toyota':11580},{'tesla':0}]}, 
{'hour':2,'car':[{'audi':9000},{'bmw':2000},{'ford':7000},{'mazda':1000},{'toyota':5000},{'tesla':700}]}, 
]; 

var hour = arr1[table_i]; 
var car=hour.car; 
    var newobj = []; 
    for(var hourx1=0;hourx1<car.length;hourx1++){ 
    var xx = car[hourx1]; 
    for (var value in xx) { 
    var chartvar = newobj.push({car:value,miles:xx[value]}); 
    var data = newobj; 
    } 
} 

x.domain(data.map(function(d) { return d.car; })); 
y.domain([0, d3.max(data, function(d) { return d.miles; })]); 

    svg.append('g') 
     .attr('class', 'y axis') 
     .call(yAxis) 
     .append('text') 
     .attr('y', 6) 
     .attr('dy', '.71em') 
     .style('text-anchor', 'start'); 

function changeHour(){ 
    svg.selectAll('.bar') 
     .data(data) 
     .enter().append('rect') 
     .attr('class', 'bar') 
     .attr('transform','translate(-20)') //move rects closer to Y axis 
     .attr('x', function(d) { return x(d.car); }) 
     .attr('width', x.rangeBand()*1) 
     .attr('y', function(d) { return y(d.miles); }) 
     .attr('height', function(d) { return height - y(d.miles); }); 


    xtext = svg.append('g') 
     .attr('class', 'x axis') 
     .attr('transform', 'translate(-20,' + height + ')') //move tick text so it aligns with rects 
     .call(xAxis); 
xtext.selectAll('text') 
     .attr('transform', function(d) { 
return 'translate(' + this.getBBox().height*50 + ',' + this.getBBox().height + ')rotate(0)'; 
     }); 

//code to enable jqm checkbox 
    $('#checkbox-2a').on('change', function(e){ 
    originalchange(e); 
}); 

$('#checkbox-2a').checkboxradio({ 
    defaults: true 
}); 
    var sortTimeout = setTimeout(function() { 
    $('#checkbox-2a').prop('checked', false).checkboxradio('refresh').change(); 
    }, 1000); 

function originalchange() { 
    clearTimeout(sortTimeout); 
    var IsChecked = $('#checkbox-2a').is(':checked'); 

    // Copy-on-write since tweens are evaluated after a delay. 
    var x0 = x.domain(data.sort(IsChecked 
     ? function(a, b) { return b.miles - a.miles; } 
     : function(a, b) { return d3.ascending(a.car, b.car); }) 
     .map(function(d) { return d.car; })) 

     .copy(); 

    svg.selectAll('.bar') 
     .sort(function(a, b) { return x0(a.car) - x0(b.car); }); 

    var transition = svg.transition().duration(950), 
     delay = function(d, i) { return i * 50; }; 

    transition.selectAll('.bar') 
     .delay(delay) 
     .attr('x', function(d) { return x0(d.car); }); 

    transition.select('.x.axis') 
     .call(xAxis) 
     .selectAll('g') 
     .delay(delay); 
    }; 
} 
changeHour(); 

$('select').change(function() { //function to change hourly data 
table_i = $(this).val(); 
var hour = arr1[table_i]; 
var car=hour.car; 
var newobj = []; 
    for(var hourx1=0;hourx1<car.length;hourx1++){ 
    var xx = car[hourx1]; 
     for (var value in xx) { 
     var chartvar = newobj.push({car:value,miles:xx[value]}); 
     var data = newobj; 
    } 
} 

x.domain(data.map(function(d) { return d.car; })); 
    y.domain([0, d3.max(data, function(d) { return d.miles; })]); 

    changeHour(); 
    }) 

我认为，通过在功能changeHour更新我可以隔离只是rects，并与他们去的文字，并根据所选小时的数据重绘他们。

但它只是绘制第一个小时。

我在做什么错？没有在年底改变功能“变种”被宣布

首先“数据”的需要：

Answer 1

两件事情不能正常工作。用'var'声明它使其成为该函数的局部变量，一旦你离开该函数，它就消失了。在没有var的情况下说“data =”意味着你正在使用你声明的数据变量。这与范围有关，这是我仍然在努力的事情，但基本上用'var'它不起作用。

var newobj = []; 
    for(var hourx1=0;hourx1<car.length;hourx1++){ 
    var xx = car[hourx1]; 
     for (var value in xx) { 
     var chartvar = newobj.push({car:value,miles:xx[value]}); 
    } 
} 
data = newobj; 

其次，你changeHour功能只有寻找新的元素，因为它挂在了。进入（）选择它的所有属性设置，changeHour应该是这样的：

var dataJoin = svg.selectAll('.bar') 
     .data(data, function(d) { return d.car; }); 

    // possible new elements, fired first time, set non-data dependent attributes 
    dataJoin 
     .enter() 
     .append('rect') 
     .attr('class', 'bar') 
     .attr('transform','translate(-20)') //move rects closer to Y axis 

    // changes to existing elements (now including the newly appended elements from above) which depend on data values (d) 
    dataJoin 
     .attr('x', function(d) { return x(d.car); }) 
     .attr('width', x.rangeBand()*1) 
     .attr('y', function(d) { return y(d.miles); }) 
     .attr('height', function(d) { return height - y(d.miles); }); 

为了完整起见应该有一个dataJoin.exit().remove()在那里，但它不会发生在这个数据集