angularjs - Data update fails for a D3.js chart Angular directive -


for front-end project need visualize data in histogram format. want use custom reusable d3.js chart this. frontend in written in angular 1 , chart angular directive made. custom d3.js chart kept in separate js-file , called in directive.

custom chart

d3.custom = {}; d3.custom.barchart = function module() {     var margin = {top: 20, right: 20, bottom: 40, left: 40},         width = 300,         height = 300,         gap = 0,         ease = 'cubic-in-out';     var svg, duration = 1000;      function exports(_selection) {         _selection.each(function(_data) {              var chartw = width - margin.left - margin.right,                 charth = height - margin.top - margin.bottom;              var color = '#c94635';             var formatcount = d3.format(",.0f");             var max = d3.max(_data);             var min = d3.min(_data);             console.log(max);             var x1 = d3.scale.linear()                   .domain([0, 100])                   // .domain([min, max]) // alternative domain based on data                   .range([0, chartw]);              // generate histogram using uniformly-spaced bins.             var bins = d3.layout.histogram()                 .bins(x1.ticks(25))                 (_data);              console.log(bins);              var ymax = d3.max(bins, function(d){return d.length});             var ymin = d3.min(bins, function(d){return d.length});             var colorscale = d3.scale.linear()                         .domain([ymin, ymax])                         .range([d3.rgb(color).brighter(), d3.rgb(color).darker()]);              var y1 = d3.scale.linear()                 .domain([0, ymax])                 .range([charth, 0]);              var xaxis = d3.svg.axis()                 .scale(x1)                 .orient('bottom');              var yaxis = d3.svg.axis()                 .scale(y1)                 .orient('left');              if(!svg) {                 svg = d3.select(this)                     .append('svg')                     .classed('chart', true);                 var container = svg.append('g').classed('container-group', true);                 container.append('g').classed('chart-group', true);                 container.append('g').classed('x-axis-group axis', true);                 container.append('g').classed('y-axis-group axis', true);             }              svg.transition().duration(duration).attr({width: width, height: height})             svg.select('.container-group')                 .attr({transform: 'translate(' + margin.left + ',' + margin.top + ')'});              svg.select('.x-axis-group.axis')                 .attr({transform: 'translate(0,'+charth+')'})                 .call(xaxis);              svg.select('.y-axis-group.axis')                 .call(yaxis);              bars = svg.select('.chart-group')                 .selectall('.bar')                 .data(bins)              bars.enter().append('g')                 .attr("class","bar")                 .attr("transform", function(d) {return "translate(" + x1(d.x) + "," + y1(d.y) + ")";})              bars.append("rect")                 .attr("x",0)                 .attr("width", (x1(bins[0].dx) - x1(0)) - 1)                 .attr("height", function(d) { return charth - y1(d.y); })                 .attr("fill", function(d) { return colorscale(d.y);});              bars.append("text")                 .attr("dy", ".75em")                 .attr("y", -12)                 .attr("x", (x1(bins[0].dx) - x1(0)) / 2)                 .attr("text-anchor", "middle")                 .text(function(d) { return formatcount(d.y); });              bars.transition()                 .duration(duration)                 .ease(ease)                 .attr("x", function(d,i) {return x1(i);})                 .attr("y", function(d,i) {return y1(i);})                 .attr("height", function(d,i) {return charth - y1(i);});              bars.exit().remove();             duration = 500;          });     }     return exports; };

the directive

(function () {    'use strict';    angular     .module('app')     .directive('barchart', function(){     var chart = d3.custom.barchart();     return {         restrict: 'e',         replace: true,         template: '<div class="chart"></div>',         scope:{             data: '=data',         },         link: function(scope, element, attrs) {             var chartel = d3.select(element[0]);              scope.$watch('data', function (newval, oldval) {                 chartel.datum(newval).call(chart);             });         }     } })  }());

on first time $scope.data changed chart appears , there no problems. if selecte second file, causing $scope.data change, chart updated; yet previous bars remain , new bars start previous bar ended.(see figure)

overlap bar-charts.

i'm sure problem somewhere in custom chart js-file. more specifically, element in element not removed upon data change , additional element added. looks bad since translation of element specific data. how can update code work?


Comments

Post a Comment

Popular posts from this blog

inversion of control - Autofac named registration constructor injection -

does autofac support specifying registration name in components' constructors? example: ninject's namedattribute . you need use autofac.extras.attributed package on top achieve this so let's have 1 interface , 2 classes: public interface ihello { string sayhello(); } public class englishhello : ihello { public string sayhello() { return "hello"; } } public class frenchhello : ihello { public string sayhello() { return "bonjour"; } } then have consumer class, in want select instance injected: public class helloconsumer { private readonly ihello helloservice; public helloconsumer([withkey("en")] ihello helloservice) { if (helloservice == null) { throw new argumentnullexception("helloservice"); } this.helloservice = helloservice; } public string sayhello() { return this.helloservice.sayhello()...
Read more

verilog - Systemverilog dynamic casting issues -

i've code snippet following in testbench function void write_to_port( my_data_type_base data ); my_data_type_extended data_ext; if(!$cast(data_ext, data)); `uvm_error(get_type_name(), "failed cast"); `uvm_info(get_name(), $psprintf("data_ext :\n%s", data_ext.sprint()), uvm_medium) // write data_ext out port.... endfunction when run it, i'm getting uvm_error "failed cast." i'm not quire sure why $cast not returning 1. can see, i'm printing out extended class data item after casting uvm_info. can see it's being cast properly. if don't use $cast if condition, don't runtime error. isn't coding practice use if dynamic cast check if $cast returning 1 ? what might reason behind cast not returning 1 in above case? i think semicolon on line 'if' not belong? i think consumes if statement, , uvm_error executes regardless of how if evaluates: if(!$cast(data_ext, data)); <- no semico...
Read more

ios - Change Storyboard View using Seague -

i have following code checks connection server, , depending on want change views if no connection found. nsstring *connect = [nsstring stringwithcontentsofurl:[nsurl urlwithstring:@"http://myserver.com"] encoding:nsutf8stringencoding error:nil]; if (connect == null) { [self performseguewithidentifier:@"network_failure" sender:self]; } else { // other code here } my problem not change views. have added storyboard segue between 2 views identifier of network_failure . not have navigation controller or that, problem? thanks help! no not problem. first of all, in objectivec exists nil object oriented null . must use that. so: if(connect == nil) or better: if(!connect) so due fact nil not same of null , probably code does't enter in if scope . you have been able discover breakpoint. anyway: be sure set trigger segue (line) 2 view controller , , name network_failure (that not best name. should instead view1toview2 ) as, m...
Read more