Built with blockbuilder.org
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3: Removing values from a chart</title> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> /* No style rules here yet */ </style> </head> <body> <p>Click on this text to remove a data value from the chart!</p> <script type="text/javascript"> var w = 600; var h = 250; var dataset = [ { key: 0, value: 5 }, { key: 1, value: 10 }, { key: 2, value: 13 }, { key: 3, value: 19 }, { key: 4, value: 21 }, { key: 5, value: 25 }, { key: 6, value: 22 }, { key: 7, value: 18 }, { key: 8, value: 15 }, { key: 9, value: 13 }, { key: 10, value: 11 }, { key: 11, value: 12 }, { key: 12, value: 15 }, { key: 13, value: 20 }, { key: 14, value: 18 }, { key: 15, value: 17 }, { key: 16, value: 16 }, { key: 17, value: 18 }, { key: 18, value: 23 }, { key: 19, value: 25 } ]; var xScale = d3.scaleBand() .domain(d3.range(dataset.length)) .rangeRound([0, w]) .padding(0.05); var yScale = d3.scaleLinear() .domain([0, d3.max(dataset, function(d) { return d.value; })]) .range([h, 0]); //a func to access key only var key = function(d) { return d.key; }; var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); svg.selectAll("rect") .data(dataset, key) //Bind data with custom key function .enter() .append("rect") .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return h - yScale(d.value); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d.value * 10) + ")"; }); svg.selectAll("text") .data(dataset, key) .enter() .append("text") .text(function(d) { return d.value; }) .attr("text-anchor", "middle") .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return yScale(d.value) + 14; }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white"); d3.select("p") .on("click", function() {// ---- remove the first element of array dataset.shift(); xScale.domain(d3.range(dataset.length)); yScale.domain([0, d3.max(dataset, function(d) { return d.value; })]); var bars = svg.selectAll("rect") .data(dataset, key); // --- if enter new element, create it full far right outside first bars.enter() .append("rect") .attr("x", w) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return h - yScale(d.value); }) .attr("fill", function(d) { return "rgb(0, 0, " + (d.value * 10) + ")"; }) // ---- merge with update elements .merge(bars) // make transition for both updated and newly created rects .transition() .duration(500) .attr("x", function(d, i) { return xScale(i); }) .attr("y", function(d) { return yScale(d.value); }) .attr("width", xScale.bandwidth()) .attr("height", function(d) { return h - yScale(d.value); }); // ---- select exiting elements bars.exit() .transition() .duration(500)// move left a bandwidth to hide .attr("x", -xScale.bandwidth()) .remove(); var texts = svg.selectAll("text") .data(dataset, key) texts .enter().append("text") .text(function(d){return d.value}) .attr("x", w + xScale.bandwidth()/2) .attr("y", function(d){return yScale(d.value)+14;}) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "white") .merge(texts) .transition() .duration(500) .text(function(d){return d.value;}) .attr("x", function(d, i) { return xScale(i) + xScale.bandwidth() / 2; }) .attr("y", function(d) { return yScale(d.value) + 14; }); texts .exit() .transition() .duration(500) .attr("x", -xScale.bandwidth()) .remove(); }); // click function end </script> </body></html> https://d3js.org/d3.v4.min.js