d3jsトグルバーアニメーション

Question

ユーザーが凡例をクリックしたときにバーをアニメートしようとしています。私は、更新機能を構築しました - しかし、私は、この機能

http://jsfiddle.net/0ht35rpb/211/

function update(){ 
    console.log("data", data); 

    var barData = data.filter(function(d1) { 
    console.log("d1", d1); 

    return !d1.disabled; 
    }); 
    console.log("barData", barData); 

    var bar = chartHolder.selectAll(".bar") 
    .data(data) 
    console.log("bar", bar); 


    bar.transition() 
    .attr("width", x0.rangeBand()) 
    .attr("y", function(d) { 
     return 0; 
     //return y(d.value); 
     }) 
     .attr("height", function(d) { 
     return 0; 
     //return height - y(d.value); 
     }); 

    bar.exit().remove(); 

/* 
    var bar = bar.selectAll("rect") 

    bar.transition() 
     //.attr("id", function(d){ return 'tag'+d.state.replace(/\s|\(|\)|\'|\,+/g, '');}) 
     .attr("x", function(d) { return x1(d.name); }) 
     .attr("width", x0.rangeBand()) 
     .attr("y", function(d) { 
     return 0; 
     //return y(d.value); 
     }) 
     .attr("height", function(d) { 
     return 0; 
     //return height - y(d.value); 
     }); 

    //bar.exit().remove(); 
    */ 

Answer 1

このコードvar bar = chartHolder.selectAll(".bar")戻り、空の選択に必要なフィルタやアニメーションを行う方法についてわかりませんよ。すべて.barsメソッドdataで新しいデータを適用し、その後すべてreactを選択し、アニメーションパラメータtransition、duration、delayを設定し、approptiate属性に新しい値を設定する必要があります。

コードを書き換えます - http://jsfiddle.net/168x28p3/1/ここでは、単に凡例をクリックした後にバーの高さをアニメーションします。しかし、この方法で、必要な別のアニメーションを作成することができます。

var $this = document.querySelector('.chart'); 
 

 
var data = [{ 
 
    label: "a", 
 
    "Current Period": 20, 
 
    "Prior Year": 10 
 
}, { 
 
    label: "b", 
 
    "Current Period": 15, 
 
    "Prior Year": 30 
 
}, { 
 
    label: "c", 
 
    "Current Period": 25, 
 
    "Prior Year": 40 
 
}, { 
 
    label: "d", 
 
    "Current Period": 5, 
 
    "Prior Year": 60 
 
}]; 
 

 
var configuration = [{ 
 
    "yLabel": "People Count" 
 
}]; 
 

 

 
var w = 660; 
 
var h = 500; 
 

 
function colores_google(n) { 
 
    var colores_g = ["#f7b363", "#448875", "#c12f39", "#2b2d39", "#f8dd2f", "#8bf41b"]; 
 
    return colores_g[n % colores_g.length]; 
 
} 
 

 

 
var margin = { 
 
    top: 20, 
 
    right: 110, 
 
    bottom: 30, 
 
    left: 20 
 
    }, 
 
    width = w - margin.left - margin.right, 
 
    height = h - margin.top - margin.bottom; 
 

 

 

 
var svg = d3.select($this).append("svg") 
 
    .attr("width", width + margin.left + margin.right) 
 
    .attr("height", height + margin.top + margin.bottom) 
 
    .append("g") 
 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 

 
var axisHolder = svg.append("g") 
 
    .attr("class", "axis"); 
 
var chartHolder = svg.append("g") 
 
    .attr("class", "chart"); 
 
var legendHolder = svg.append("g") 
 
    .attr("class", "legend"); 
 

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

 
var x1 = d3.scale.ordinal(); 
 

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

 
//var colorRange = d3.scale.category20(); 
 
//var color = d3.scale.ordinal() 
 
//.range(colorRange.range()); 
 

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

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

 
var divTooltip = d3.select("body").append("div").attr("class", "toolTip"); 
 

 

 
var options = d3.keys(data[0]).filter(function(key) { 
 
    return key !== "label"; 
 
}); 
 

 
data.forEach(function(d) { 
 
    d.valores = options.map(function(name) { 
 
    return { 
 
     name: name, 
 
     value: +d[name] 
 
    }; 
 
    }); 
 
}); 
 

 
x0.domain(data.map(function(d) { 
 
    return d.label; 
 
})); 
 
x1.domain(options).rangeRoundBands([0, x0.rangeBand()]); 
 
y.domain([0, d3.max(data, function(d) { 
 
    return d3.max(d.valores, function(d) { 
 
    return d.value; 
 
    }); 
 
})]); 
 

 
axisHolder.append("g") 
 
    .attr("class", "x axis") 
 
    .attr("transform", "translate(0," + height + ")") 
 
    .call(xAxis); 
 

 
axisHolder.append("g") 
 
    .attr("class", "y axis") 
 
    .call(yAxis) 
 
    .append("text") 
 
    .attr("transform", "rotate(-90)") 
 
    .attr("y", 6) 
 
    .attr("dy", ".71em") 
 
    .style("text-anchor", "end") 
 
    .text(configuration[0].yLabel); 
 

 
var bar = chartHolder.selectAll(".bar") 
 
    .data(data) 
 
    .enter().append("g") 
 
    .attr("class", "bars") 
 
    .attr("transform", function(d) { 
 
    return "translate(" + x0(d.label) + ",0)"; 
 
    }); 
 

 
bar.selectAll("rect") 
 
    .data(function(d) { 
 
    return d.valores; 
 
    }) 
 
    .enter().append("rect") 
 
    .attr("width", x1.rangeBand()) 
 
    .attr("x", function(d) { 
 
    return x1(d.name); 
 
    }) 
 
    .attr("y", function(d) { 
 
    return y(d.value); 
 
    }) 
 
    .attr("value", function(d) { 
 
    return d.name; 
 
    }) 
 
    .attr("height", function(d) { 
 
    return height - y(d.value); 
 
    }) 
 
    .style("fill", function(d, i) { 
 
    return colores_google(i); 
 
    }); 
 

 
bar 
 
    .on("mousemove", function(d) { 
 
    divTooltip.style("left", d3.event.pageX + 10 + "px"); 
 
    divTooltip.style("top", d3.event.pageY - 25 + "px"); 
 
    divTooltip.style("display", "inline-block"); 
 
    var x = d3.event.pageX, 
 
     y = d3.event.pageY 
 
    var elements = document.querySelectorAll(':hover'); 
 
    l = elements.length 
 
    l = l - 1 
 
    elementData = elements[l].__data__ 
 
    divTooltip.html((d.label) + "<br>" + elementData.name + "<br>" + elementData.value + "%"); 
 
    }); 
 
bar 
 
    .on("mouseout", function(d) { 
 
    divTooltip.style("display", "none"); 
 
    }); 
 

 

 
var legend = legendHolder.selectAll(".legend") 
 
    .data(options.slice()) 
 
    .enter().append("g") 
 
    .attr("class", "legend") 
 
    .attr("transform", function(d, i) { 
 
    return "translate(" + margin.right + "," + i * 20 + ")"; 
 
    }); 
 

 
legend.append("rect") 
 
    .attr("x", width - 18) 
 
    .attr("width", 18) 
 
    .attr("height", 18) 
 
    .style("fill", function(d, i) { 
 
    return colores_google(i); 
 
    }) 
 
    .on("click", function(d) { 
 
    console.log("d", d); 
 
    d.disabled = !d.disabled; 
 
    update(); 
 
    }); 
 

 
legend.append("text") 
 
    .attr("x", width - 24) 
 
    .attr("y", 9) 
 
    .attr("dy", ".35em") 
 
    .style("text-anchor", "end") 
 
    .text(function(d) { 
 
    return d; 
 
    }); 
 

 

 

 

 
function update() { 
 
    var barData = data.map(item => { 
 
    item.valores = item.valores.map(valor => { 
 
     return Object.assign({}, valor, { value: Math.random() * 40 }) 
 
    }) 
 
    return item; 
 
    }) 
 

 
    var bar = chartHolder.selectAll(".bars") 
 
    .data(barData) 
 

 
    var rect = bar.selectAll("rect") 
 
    .data(function(d) { 
 
     return d.valores; 
 
    }) 
 

 
    rect 
 
    .transition() 
 
    .duration(1000) 
 
    .delay(100) 
 
    .attr("width", x0.rangeBand()/2) 
 
    .attr("y", function(d) { 
 
     return y(d.value); 
 
    }) 
 
    .attr("height", function(d) { 
 
     return height - y(d.value); 
 
    }); 
 
}

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    border: 0; 
 
} 
 

 
body { 
 
    background: #ffd; 
 
} 
 

 
body { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    position: relative; 
 
} 
 

 
text { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
} 
 

 
.toolTip { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    position: absolute; 
 
    display: none; 
 
    width: auto; 
 
    height: auto; 
 
    background: none repeat scroll 0 0 white; 
 
    border: 0 none; 
 
    border-radius: 8px 8px 8px 8px; 
 
    box-shadow: -3px 3px 15px #888888; 
 
    color: black; 
 
    font: 12px sans-serif; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
.legend { 
 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    font-size: 60%; 
 
} 
 

 
rect { 
 
    stroke-width: 2; 
 
} 
 

 
text { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis text { 
 
    font: 10px sans-serif; 
 
} 
 

 
.axis path { 
 
    fill: none; 
 
    stroke: #000; 
 
} 
 

 
.axis line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.axis .tick line { 
 
    stroke-width: 1; 
 
    stroke: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.axisHorizontal path { 
 
    fill: none; 
 
} 
 

 
.axisHorizontal line { 
 
    fill: none; 
 
    stroke: #000; 
 
    shape-rendering: crispEdges; 
 
} 
 

 
.axisHorizontal .tick line { 
 
    stroke-width: 1; 
 
    stroke: rgba(0, 0, 0, 0.2); 
 
} 
 

 
.bar { 
 
    fill: steelblue; 
 
    fill-opacity: .9; 
 
} 
 

 

 
/* 
 
.x.axis path { 
 
    display: none; 
 
}*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 
 
<div class="chart"></div>