JavaScript — гистограмма D3 не перерисовывается

Гистограмма D3 не перерисовывается

Я создал сгруппированную гистограмму с подсказкой, но данные не отображаются повторно при выборе нового значения из выпадающего меню, а вместо этого основываются на той же предыдущей гистограмме. Как я могу изменить мою диаграмму таким образом, чтобы при новом раскрывающемся значении в выбранной диаграмме изменялся переход (анимация).

 {amp}lt;!DOCTYPE html{amp}gt; {amp}lt;meta charset="utf-8"{amp}gt; {amp}lt;head{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;select id="queryYear" data-toggle="modal" data-target="#myModal" class="btn btn-danger "{amp}gt; {amp}lt;option value="2019" selected="selected"{amp}gt;2019{amp}lt;/option{amp}gt; {amp}lt;option value="2018"{amp}gt;2018{amp}lt;/option{amp}gt; {amp}lt;option value="2017"{amp}gt;2017{amp}lt;/option{amp}gt; {amp}lt;/select{amp}gt; {amp}lt;div id="charts" style="margin-left:45px;margin-top:20px"{amp}gt; {amp}lt;h3{amp}gt;Payee Remmittance{amp}lt;/h3{amp}gt; {amp}lt;svg width="1000" height="500"{amp}gt;{amp}lt;/svg{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script src="https://code.jquery.com/jquery-latest.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://d3js.org/d3.v4.min.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; function createChartLegend(mainDiv, group) { var z = d3.scaleOrdinal(d3.schemeCategory10); var mainDivName = mainDiv.substr(1, mainDiv.length); $(mainDiv).before("{amp}lt;div id='Legend_"   mainDivName   "' class='pmd-card-body' style='margin-top:0; margin-bottom:0;'{amp}gt;{amp}lt;/div{amp}gt;"); var keys = group; keys.forEach(function(d) { var cloloCode = z(d); $("#Legend_"   mainDivName).append("{amp}lt;span class='team-graph team1' style='display: inline-block; margin-right:10px;'{amp}gt; {amp}lt;span style='background:"   cloloCode   ";width: 10px;height: 10px;display: inline-block;vertical-align: middle;'{amp}gt;{amp}amp;nbsp;{amp}lt;/span{amp}gt; {amp}lt;span style='padding-top: 0;font-family:Source Sans Pro, sans-serif;font-size: 13px;display: inline;'{amp}gt;"   d   " {amp}lt;/span{amp}gt; {amp}lt;/span{amp}gt;"); }); } var group = ["Not Paid", "Paid"]; var parseDate = d3.timeFormat("%b-%Y"); var mainDiv = "#charts"; var mainDivName = "charts"; createChartLegend(mainDiv, group); var salesData = [{ 'agency': 'Manufacturing', 'Paid': 35, 'Not Paid': 10 }, { 'agency': 'CONSTRUCTION ', 'Paid': 82, 'Not Paid': 1 }, { 'agency': 'INSURANCE', 'Paid': 7, 'Not Paid': 81 }, { 'agency': 'OIL {amp}amp; GAS', 'Paid': 50, 'Not Paid': 13 }, { 'agency': 'TRANSPORT', 'Paid': 19, 'Not Paid': 28 }, { 'agency': 'HEALTH CARE ', 'Paid': 17, 'Not Paid': 23 }, { 'agency': 'LEGAL SERVICES', 'Paid': 27, 'Not Paid': 8 }, { 'agency': 'INFORMATION {amp}amp; COMMUNICATION TECH ', 'Paid': 21, 'Not Paid': 2 }, { 'agency': 'TELECOMMUNICATION', 'Paid': 12, 'Not Paid': 32 }, { 'agency': 'EDUCATIONAL SERVICES ', 'Paid': 47, 'Not Paid': 48 } ]; var salesData1 = [{ 'agency': 'Manufacturing', 'Paid': 125, 'Not Paid': 200 }, { 'agency': 'CONSTRUCTION ', 'Paid': 182, 'Not Paid': 11 }, { 'agency': 'INSURANCE', 'Paid': 171, 'Not Paid': 181 }, { 'agency': 'OIL {amp}amp; GAS', 'Paid': 150, 'Not Paid': 113 }, { 'agency': 'TRANSPORT', 'Paid': 119, 'Not Paid': 128 }, { 'agency': 'HEALTH CARE ', 'Paid': 117, 'Not Paid': 123 }, { 'agency': 'LEGAL SERVICES', 'Paid': 127, 'Not Paid': 18 }, { 'agency': 'INFORMATION {amp}amp; COMMUNICATION TECH ', 'Paid': 121, 'Not Paid': 12 }, { 'agency': 'TELECOMMUNICATION', 'Paid': 112, 'Not Paid': 32 }, { 'agency': 'EDUCATIONAL SERVICES ', 'Paid': 147, 'Not Paid': 48 } ]; d3.select("#queryYear").on("change", function(d) { var v = d3.select(this).property('value'); console.log(v) if (v == 2018) { console.log(salesData1) update(salesData1) } if (v == 2017) { console.log(salesData) update(salesData) } if (v == 2019) { update(salesData) } }) function update(mda){ mda.forEach(function(d) { d = type(d); }); var layers = d3.stack() .keys(group) .offset(d3.stackOffsetDiverging) (mda) ; var svg = d3.select("svg"), margin = { top: 20, right: 30, bottom: 60, left: 120 }, width =  svg.attr("width"), height =  svg.attr("height"); var t = d3.transition() .duration(4000); var x = d3.scaleLinear() .rangeRound([margin.left, width - margin.right]); x.domain([d3.min(layers, stackMin), d3.max(layers, stackMax)]); var y = d3.scaleBand() .rangeRound([height - margin.bottom, margin.top]) .padding(0.1); y.domain(mda.map(function(d) { return d.agency; })) function stackMin(layers) { return d3.min(layers, function(d) { return d[0]; }); } function stackMax(layers) { return d3.max(layers, function(d) { return d[1]; }); } var z = d3.scaleOrdinal(d3.schemeCategory10); var maing = svg.append("g") .selectAll("g") .data(layers) .remove(); var g = maing.enter() .append("g") .attr("fill", function(d) { return z(d.key); }); var rect = g.selectAll("rect") .data(function(d) { d.forEach(function(d1) { d1.key = d.key; return d1; }); return d; }) .enter().append("rect") .attr("data", function(d) { var data = {}; data["key"] = d.key; data["value"] = d.data[d.key]; var total = 0; group.map(function(d1) { total = total   d.data[d1] }); data["total"] = total; return JSON.stringify(data); }) .attr("width", function(d) { return x(d[1]) - x(d[0]); }) .attr("x", function(d) { return x(d[0]); }) .attr("y", function(d) { return y(d.data.agency); }) .attr("height", y.bandwidth); rect.on("mouseover", function() { var currentEl = d3.select(this); var fadeInSpeed = 120; d3.select("#recttooltip_"   mainDivName) .transition() .duration(fadeInSpeed) .style("opacity", function() { return 1; }); d3.select("#recttooltip_"   mainDivName).attr("transform", function(d) { var mouseCoords = d3.mouse(this.parentNode); var xCo = 0; if (mouseCoords[0]   10 {amp}gt;= width * 0.80) { xCo = mouseCoords[0] - parseFloat(d3.selectAll("#recttooltipRect_"   mainDivName) .attr("width")); } else { xCo = mouseCoords[0]   10; } var x = xCo; var yCo = 0; if (mouseCoords[0]   10 {amp}gt;= width * 0.80) { yCo = mouseCoords[1]   10; } else { yCo = mouseCoords[1]; } var x = xCo; var y = yCo; return "translate("   x   ","   y   ")"; }); //CBT:calculate tooltips text var tooltipData = JSON.parse(currentEl.attr("data")); var tooltipsText = ""; d3.selectAll("#recttooltipText_"   mainDivName).text(""); var yPos = 0; d3.selectAll("#recttooltipText_"   mainDivName).append("tspan").attr("x", 0).attr("y", yPos * 10).attr("dy", "1.9em").text(tooltipData.key   ": "   tooltipData.value); yPos = yPos   1; d3.selectAll("#recttooltipText_"   mainDivName).append("tspan").attr("x", 0).attr("y", yPos * 10).attr("dy", "1.9em").text("Total"   ": "   tooltipData.total); //CBT:calculate width of the text based on characters var dims = helpers.getDimensions("recttooltipText_"   mainDivName); d3.selectAll("#recttooltipText_"   mainDivName   " tspan") .attr("x", dims.w   4); d3.selectAll("#recttooltipRect_"   mainDivName) .attr("width", dims.w   10) .attr("height", dims.h   20); }); rect.on("mousemove", function() { var currentEl = d3.select(this); currentEl.attr("r", 7); d3.selectAll("#recttooltip_"   mainDivName) .attr("transform", function(d) { var mouseCoords = d3.mouse(this.parentNode); var xCo = 0; if (mouseCoords[0]   10 {amp}gt;= width * 0.80) { xCo = mouseCoords[0] - parseFloat(d3.selectAll("#recttooltipRect_"   mainDivName) .attr("width")); } else { xCo = mouseCoords[0]   10; } var x = xCo; var yCo = 0; if (mouseCoords[0]   10 {amp}gt;= width * 0.80) { yCo = mouseCoords[1]   10; } else { yCo = mouseCoords[1]; } var x = xCo; var y = yCo; return "translate("   x   ","   y   ")"; }); }); rect.on("mouseout", function() { var currentEl = d3.select(this); d3.select("#recttooltip_"   mainDivName) .style("opacity", function() { return 0; }) .attr("transform", function(d, i) { // klutzy, but it accounts for tooltip padding which could push it onscreen var x = -500; var y = -500; return "translate("   x   ","   y   ")"; }); }); svg.append("g") .attr("transform", "translate(0,"   (height - margin.bottom)   ")") .call(d3.axisBottom(x)) .append("text") .attr("x", width / 2) .attr("y", margin.bottom * 0.5) .attr("dx", "0.32em") .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "start") .text("Count") .remove() .exit(); var ele = svg.append("g") .attr("transform", "translate("   margin.left   ",0)") .call(d3.axisLeft(y)); ele.selectAll("text") .attr("transform", "rotate(-55)") .attr("dx", ".5em") .attr("dy", "-.9em"); ele.append("text") .attr("transform", "rotate(-90)") .attr("x", 0 - (height / 2)) .attr("y", 15 - (margin.left)) .attr("dy", "0.32em") .attr("fill", "#000") .attr("font-weight", "bold") .attr("text-anchor", "middle") .text("Agency Name"); var rectTooltipg = svg.append("g") .attr("font-family", "sans-serif") .attr("font-size", 10) .attr("text-anchor", "end") .attr("id", "recttooltip_"   mainDivName) .attr("style", "opacity:0") .attr("transform", "translate(-500,-500)"); rectTooltipg.append("rect") .attr("id", "recttooltipRect_"   mainDivName) .attr("x", 0) .attr("width", 120) .attr("height", 80) .attr("opacity", 0.71) .style("fill", "#000000"); rectTooltipg .append("text") .attr("id", "recttooltipText_"   mainDivName) .attr("x", 30) .attr("y", 15) .attr("fill", function() { return "#fff" }) .style("font-size", function(d) { return 10; }) .style("font-family", function(d) { return "arial"; }) .text(function(d, i) { return ""; }); function type(d) { d.agency = d.agency; group.forEach(function(c) { d[c] =  d[c]; }); return d; } var helpers = { getDimensions: function(id) { var el = document.getElementById(id); var w = 0, h = 0; if (el) { var dimensions = el.getBBox(); w = dimensions.width; h = dimensions.height; } else { console.log("error: getDimensions() "   id   " not found."); } return { w: w, h: h }; } }; } {amp}lt;/script{amp}gt; 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector