Question

我一直在尝试创建动画条形图。条形图应以这样一种方式工作，即在5年内条形图显示每个国家/地区的值。

基于值的增加和减少，条形图应自行调整大小，但是，只要值增加，我的条形图就会增加其大小，但是值减小对我的条形没有影响。

我也一直在尝试对一年中的每次更改进行排序，并且每当值更改时，条形码应以降序移动其位置，这种情况也不会发生。请帮助我。

https://jsfiddle.net/9qp8yt7h/1/#&togetherjs=M4S6aP60Q8

我尝试实现exit（），但是exit清除了以前的数据并重新开始，这不是我想要的，我希望条形图从以前的值更新。

main.js
-------------

/*
*    main.js
*    Mastering Data Visualization with D3.js
*    2.5 - Activity: Adding SVGs to the screen
*/
var margin = { left:80, right:20, top:50, bottom:100 };

var width = 600 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var g = d3.select("#chart-area")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom+40)
    .append("g")
        .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");
var time = 0;

var yLabel = g.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", -40)
    .attr("x", -170)
    .attr("font-size", "20px")
    .attr("text-anchor", "middle")
    .text("Life Expectancy (Years)")
var timeLabel = g.append("text")
    .attr("y", height -50)
    .attr("x", width -500)
    .attr("font-size", "40px")
    .attr("opacity", "0.4")
    .attr("text-anchor", "middle")
    .text("1800");

  var data =      d3.json("buildings.json").then(function(data){
            // console.log(data);

            // Clean data
            data.forEach(function(d) {
                d.Year = +d.Year;
                d.Budget=+d.Budget;
            });



const formattedData = data.map(function(year){
    return year["countries"].filter(function(country){
        var dataExists = (country.budget);
        return dataExists
    })
});

// Run the code every 0.1 second
d3.interval(function(){
    // At the end of our data, loop back
    time = (time < 5) ? time+1 : 0
    update(formattedData[time]);
}, 2000);

// First run of the visualization
update(formattedData[0]);

})

function update(data) {
// Standard transition time for the visualization
var t = d3.transition()
    .duration(2000);


var rects = g.selectAll("rect").data(data, function(d){
console.log(data);
    return d;
});



   rects.enter()
    .append("rect")
    .attr("class", "enter")

   .merge(rects)
        .attr("x", 0)
        .attr("y", function(d,i){
          return i*20;
        }).transition(t)
        .attr("width", function(d,i){
          return d.budget/250;

        })
        .attr("height", 18)
        .attr("fill",function(d,i){
  return d.fill;
});


timeLabel.text(+(time + 1800))



}

我希望我的条形图每年更新一次值，并在对其进行排序和重新定位时在屏幕上显示相同的值

https://jsfiddle.net/9qp8yt7h/1/#&togetherjs=M4S6aP60Q8

数据可视化仅适用于条形图中的第一个条形

0 个答案: