Javascript 使用angularjs和d3.js在一个页面中显示多个图形
我刚刚开始学习AngularJS和D3.js来绘制条形图。我成功地在一页中绘制了一个条形图。但我有一个问题，用不同的数据绘制多个图形。例如：myJavascript 使用angularjs和d3.js在一个页面中显示多个图形,javascript,angularjs,d3.js,Javascript,Angularjs,D3.js,我刚刚开始学习AngularJS和D3.js来绘制条形图。我成功地在一页中绘制了一个条形图。但我有一个问题，用不同的数据绘制多个图形。例如：myapp.js如下所示： // Module name to be included in html app var app = angular.module('App', []); // FundamoCtrl controller which holds the data from the JSON app.controller("FundamoCt
app.js// Module name to be included in html app
var app = angular.module('App', []);
// FundamoCtrl controller which holds the data from the JSON
app.controller("FundamoCtrl", function($scope) {
$scope.tags = [
{'#text': "author-vimal", '@pass': 4},
{'#text': "author-raj", '@pass': 8},
{'#text': "tt-positive", '@pass': 15},
{'#text': "tt-negative", '@pass': 16},
{'#text': "author-selvam", '@pass': 23},
{'#text': "author-inba", '@pass': 42}
];
});
// Custom filter for the json data
app.filter('filterData', function() {
return function(data, searchFor) {
var property = Object.keys(searchFor)[0];
var result = [];
for (var i = 0; i < data.length; i++) {
if (data[i][property].indexOf(searchFor[property]) > -1) {
result.push(data[i]);
}
}
return result;
};
});
// Bar Graph to show the result
app.directive('barGraph', [
'$filter',
function($filter) {
return {
restrict: 'EA',
scope: {
data: '=',
filtername: '=',
filtervalue: '=',
},
link: function(scope, element, attrs) {
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var svg = d3.select(element[0])
.append("svg")
.attr("class", "chart");
scope.render = function(data) {
x.domain(data.map(function(d) { return d['#text']; }));
y.domain([0, d3.max(data, function(d) { return d['@pass']; })]);
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + x(d['#text']) + ", 0)"; });
bar.append("rect")
.attr("class", "rect-bar")
.attr("y", function(d) { return y(d['@pass']); })
.attr("height", function(d) { return height - y(d['@pass']); })
.attr("width", x.rangeBand());
bar.append("text")
.attr("x", x.rangeBand() / 2)
.attr("y", function(d) { return y(d['@pass']) + 15; })
.attr("dy", ".5em")
.text(function(d) { return d['@pass']; })
.attr("class", "bar-text");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Pass Count");
};
scope.$watch('data', function(data) {
data = $filter(scope.filtername)(data, scope.filtervalue);
scope.render(data);
}, true);
}
};
}
]);
<div ng-controller="MyCtrl">
<bar-graph id="bar1" data="tags" filtername="'filterData'" filterValue="{'#text': 'author-'}"></bar-graph>
<bar-graph id="bar2" data="tags" filtername="'filterData'" filterValue="{'#text': 'tt-'}"></bar-graph>
</div>
//要包含在html应用程序中的模块名称
var-app=angular.module（'app'，[]）；
//FundamoCtrl控制器，用于保存来自JSON的数据
app.controller（“FundamoCtrl”，函数（$scope）{
$scope.tags=[
{#text'：“author vimal”，“@pass”：4}，
{#text'：“author raj”，“@pass”：8}，
{#text'：“tt阳性”，“@pass”：15}，
{#text'：“tt负”，“@pass”：16}，
{#text'：“author selvam”，“@pass”：23}，
{#text'：“作者inba”，“@pass”：42}
];
});
//json数据的自定义过滤器
app.filter（'filterData'，function（）{
返回函数（数据、搜索）{
var属性=Object.keys（searchFor）[0]；
var结果=[]；
对于（变量i=0；i-1）{
结果推送（数据[i]）；
}
}
返回结果；
};
});
//显示结果的条形图
应用指令（“条形图”[
“$filter”，
函数（$filter）{
返回{
限制：“EA”，
范围：{
数据：'='，
过滤器名称：“=”，
filtervalue:“=”，
},
链接：函数（范围、元素、属性）{
var margin={顶部：20，右侧：30，底部：30，左侧：40}，
宽度=500-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom；
var x=d3.scale.ordinal（）
.rangeRoundBands（[0，宽度]，.1）；
变量y=d3.scale.linear（）
.范围（[高度，0]）；
var xAxis=d3.svg.axis（）
.比例（x）
.东方（“底部”）；
var yAxis=d3.svg.axis（）
.比例（y）
.东方（“左”）
.蜱（5）；
var svg=d3.select（元素[0]）
.append（“svg”）
.attr（“类别”、“图表”）；
scope.render=函数（数据）{
x、 域（data.map（函数（d）{returnd['#text']}））；
y、 域（[0，d3.max（数据，函数（d）{returnd['@pass']；}）]）；
var图表=d3。选择（“图表”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”、“平移”（+margin.left+）、“+margin.top+”）；
变量条=图表。选择全部（“g”）
.数据（数据）
.输入（）
.附加（“g”）
.attr（“transform”，函数（d，i）{return”translate（+x（d['#text']）+”，0）；}）；
附加条（“rect”）
.attr（“类”、“矩形条”）
.attr（“y”，函数（d）{返回y（d['@pass']）；}）
.attr（“height”，函数（d）{返回高度-y（d['@pass']）；}）
.attr（“宽度”，x.rangeBand（））；
附加条（“文本”）
.attr（“x”，x.rangeBand（）/2）
.attr（“y”，函数（d）{返回y（d['@pass']）+15；}）
.attr（“dy”，“.5em”）
.text（函数（d）{返回d['@pass']；}）
.attr（“类”、“条文本”）；
图表.附加（“g”）
.attr（“类”、“x轴”）
.attr（“变换”、“平移（0）”、“高度+”）
.呼叫（xAxis）；
图表.附加（“g”）
.attr（“类”、“y轴”）
.呼叫（yAxis）
.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-页边距。左）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.style（“文本锚定”、“中间”）
.文本（“通过计数”）；
};
范围$watch（'数据'），功能（数据）{
数据=$filter（scope.filtername）（数据，scope.filtervalue）；
范围.提供（数据）；
}，对）；
}
};
}
]);
// Module name to be included in html app
var app = angular.module('App', []);
// FundamoCtrl controller which holds the data from the JSON
app.controller("FundamoCtrl", function($scope) {
$scope.tags = [
{'#text': "author-vimal", '@pass': 4},
{'#text': "author-raj", '@pass': 8},
{'#text': "tt-positive", '@pass': 15},
{'#text': "tt-negative", '@pass': 16},
{'#text': "author-selvam", '@pass': 23},
{'#text': "author-inba", '@pass': 42}
];
});
// Custom filter for the json data
app.filter('filterData', function() {
return function(data, searchFor) {
var property = Object.keys(searchFor)[0];
var result = [];
for (var i = 0; i < data.length; i++) {
if (data[i][property].indexOf(searchFor[property]) > -1) {
result.push(data[i]);
}
}
return result;
};
});
// Bar Graph to show the result
app.directive('barGraph', [
'$filter',
function($filter) {
return {
restrict: 'EA',
scope: {
data: '=',
filtername: '=',
filtervalue: '=',
},
link: function(scope, element, attrs) {
var margin = {top: 20, right: 30, bottom: 30, left: 40},
width = 500 - margin.left - margin.right,
height = 300 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5);
var svg = d3.select(element[0])
.append("svg")
.attr("class", "chart");
scope.render = function(data) {
x.domain(data.map(function(d) { return d['#text']; }));
y.domain([0, d3.max(data, function(d) { return d['@pass']; })]);
var chart = d3.select(".chart")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var bar = chart.selectAll("g")
.data(data)
.enter()
.append("g")
.attr("transform", function(d, i) { return "translate(" + x(d['#text']) + ", 0)"; });
bar.append("rect")
.attr("class", "rect-bar")
.attr("y", function(d) { return y(d['@pass']); })
.attr("height", function(d) { return height - y(d['@pass']); })
.attr("width", x.rangeBand());
bar.append("text")
.attr("x", x.rangeBand() / 2)
.attr("y", function(d) { return y(d['@pass']) + 15; })
.attr("dy", ".5em")
.text(function(d) { return d['@pass']; })
.attr("class", "bar-text");
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 0 - margin.left)
.attr("x", 0 - (height / 2))
.attr("dy", "1em")
.style("text-anchor", "middle")
.text("Pass Count");
};
scope.$watch('data', function(data) {
data = $filter(scope.filtername)(data, scope.filtervalue);
scope.render(data);
}, true);
}
};
}
]);
<div ng-controller="MyCtrl">
<bar-graph id="bar1" data="tags" filtername="'filterData'" filterValue="{'#text': 'author-'}"></bar-graph>
<bar-graph id="bar2" data="tags" filtername="'filterData'" filterValue="{'#text': 'tt-'}"></bar-graph>
</div>
有关更多信息，请参见此好的，因此我找到了问题所在。我将
gclasschart图表svg有关更多信息，请参见。通常，最好不要在指令中执行d3.select（），因为这会打破指令的封装。始终从d3开始。选择（元素[0]），然后在该元素上链接进一步的选择。至少，这是我的方法。@EthanJewett:我和OP有同样的问题，得出了同样的结论。我想试试你的方法。您是否有文档记录或