Question

首次加载页面时，我的条形图会正常显示。

但是从下拉列表中选择小时2，并且它不想更新为小时2数据，它只是显示小时1。

这是我的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

2件事不起作用：

首先，需要在更改函数中声明“data”而不使用“var”。用'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函数只查找新元素，因为它在.enter（）选项上挂起所有属性设置，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()，但这不是在这个数据集中发生的事情

d3使用新值重绘条形图

1 个答案: