javascript - Angular + d3.js: Data binding with SVG text attr? -

i'm working on visualization involves updating text element appear inside of circle. like:

<g>     <circle></circle>     <text>my text needs updating</text> </g> 

along small visual d3 brush being used slider. on brush/brushend, need <text>update text here</text>, based on data associated time scale along slider's x-axis.

i have 2 angular directives. 1 contains circle, other slider. in slider directive i'm calling:

$rootscope.$emit('brushing'); , setting rootscope variable according data, $rootscope.mynewvalue = newvalue; sliding occurs

then i'm listening in other directive, , updating text.attr rootscope var:

$rootscope.$on('brushing', function () { mytext.text($rootscope.mynewvalue); });

where:

var mytext = svg.append('text')     .text('i'm trying update text..'); 

... in d3 portion of code

doing things way seems work, i'm wondering if there way bind data directly when initializing mytext:

var mytext = svg.append('text)     .text($rootscope.mynewvalue); 

so value updates directly without having $emit , listen. i've tried scope.$apply in directive seems have no effect.

has encountered similar scenario when using d3 angular?

you can wrap d3js code in directive use property passed in , watch see if changes update d3js code accordingly (your saving reference svg text still best bet). example see directive below use val update data used in bar chart display (note didn't deal transitions here yet, , codes bit of mess see general point)

directive('barchart', function ( /* dependencies */ ) {   // define constants , helpers used directive    var width = 600,     height = 80;    return {     restrict: 'e', // directive can invoked using <bar-chart></bar-chart> tag in template     scope: { // attributes bound scope of directive       val: '='     },     link: function (scope, element, attrs) {       // initialization, done once per my-directive tag in template. if my-directive within       // ng-repeat-ed template called every time ngrepeat creates new copy of template.        // set initial svg object       var vis = d3.select(element[0])         .append("svg")           .attr("class", "chart")           .attr("width", width)           .attr("height", height);         // whenever bound 'exp' expression changes, execute        scope.$watch('val', function (newval, oldval) {          // clear elements inside of directive         vis.selectall('*').remove();         vis.attr("height", newval.length*22);          // if 'val' undefined, exit         if (!newval) {           return;         }         var totaldatasetsize = 0;          (var = 0; < newval.length; i++) {           totaldatasetsize += newval[i].data.length         };          function calcbarwidth(d) {           return (totaldatasetsize==0)?0:d.data.length/totaldatasetsize*420;         }          vis.selectall("rect")             .data(newval)           .enter().append("rect")             .attr("y", function(d, i) { return i*20; })             .attr("width", calcbarwidth)             .attr("height", function(d) {return 20});          vis.selectall("text")             .data(newval)           .enter().append("text")             .attr("x", function(d) { return calcbarwidth(d)+10})             .attr("y", function(d, i) { return (i+1)*20; })             .attr("dy", "-.3em") // vertical-align: middle             .style("font-size", ".7em")             .attr("fill", "black")             .attr("text-anchor", "beginning") // text-align: right             .text(function(d,i){ return d.data.length.tostring() + "  " + d.label})        },true);     }   }; })