角+ d3.js:数据与SVG的文本ATTR约束力? [英] Angular + d3.js: Data binding with SVG text attr?
问题描述
我的工作,涉及更新的一个圆圈内出现一个文本元素的可视化。是这样的:
I'm working on a visualization that involves updating a text element that appear inside of a circle. Something like:
<g>
<circle></circle>
<text>My text that needs updating</text>
</g>
随着这个小小的视觉上被用作滑块D3刷。在刷/ brushend,我需要&LT;文本&gt;此处更新&lt文本; /文本方式&gt;
的基础上,用时间尺度沿着滑块的X轴相关的数据
Along with this small visual is a d3 brush being used as a slider. On brush/brushend, I need to <text>Update the text here</text>
, based on data associated with a time scale along the slider's x-axis.
我有两个角指令。一个包含圆,另一个是滑块。在我的滑块指示我打电话:
I have two Angular directives. One that contains the circle, the other that is the slider. In my slider directive I'm calling:
$ rootScope $放出('刷牙');
并设置根据我的数据rootScope变量, $ rootScope.myNewValue =为newValue;
如发生滑动
$rootScope.$emit('brushing');
and setting a rootScope variable according to my data, $rootScope.myNewValue = newValue;
as sliding occurs
然后我在我的其他指令侦听此,和更新text.attr是rootScope VAR:
Then I'm listening for this in my other directive, and updating the text.attr to be the rootScope var:
$ rootScope。在('刷牙'$,函数(){
myText.text($ rootScope.myNewValue);
});
其中:
var myText = svg.append('text')
.text('I'm trying to update this text..');
...在code的D3部分
... in the d3 portion of the code
做事这种方式似乎工作,但我不知道是否有将数据直接绑定的方式会将myText初始化时:
Doing things this way seems to work, but I'm wondering if there is a way to bind the data directly when initializing myText:
var myText = svg.append('text)
.text($rootScope.myNewValue);
这样的价值直接更新,而无需发出$和收听。我试过范围。$适用
中的指令,但似乎没有任何效果。
So that the value updates directly without having to $emit and listen. I've tried scope.$apply
in the directive but that seems to have no effect.
有没有人遇到过类似的情况?
Has anyone encountered a similar scenario when using d3 with Angular?
推荐答案
您可以包裹在一个指令中D3JS code,则使用在传递一个属性,看着它,看它是否改变了更新D3JS code相应(您保存到文本SVG的引用可能仍然是最好的选择)。举一个例子见下面,我用VAL更新条形图显示使用的数据我的指令(注意我没有过渡处理现在还没有到,而codeS有点乱,但是希望你看到一般点)
You can wrap up the D3JS code in a directive then use a property that is passed in and watch it to see if it changes to update the D3JS code accordingly (your saving a reference to the svg text is still probably the best bet). For an example see my directive below where I use val to update the data used in a bar chart display (note I didn't deal with transitions here yet, and the codes a bit of a mess but hopefully you see the general point)
directive('barChart', function ( /* dependencies */ ) {
// define constants and helpers used for the directive
var width = 600,
height = 80;
return {
restrict: 'E', // the directive can be invoked only by using <bar-chart></bar-chart> tag in the template
scope: { // attributes bound to the scope of the directive
val: '='
},
link: function (scope, element, attrs) {
// initialization, done once per my-directive tag in template. If my-directive is within an
// ng-repeat-ed template then it will be called every time ngRepeat creates a new copy of the template.
// set up initial svg object
var vis = d3.select(element[0])
.append("svg")
.attr("class", "chart")
.attr("width", width)
.attr("height", height);
// whenever the bound 'exp' expression changes, execute this
scope.$watch('val', function (newVal, oldVal) {
// clear the elements inside of the directive
vis.selectAll('*').remove();
vis.attr("height", newVal.length*22);
// if 'val' is undefined, exit
if (!newVal) {
return;
}
var totalDataSetSize = 0;
for (var i = 0; i < 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);
}
};
})
这篇关于角+ d3.js:数据与SVG的文本ATTR约束力?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!