我是Angular的新手，我试图创建一个全局过滤器控制器，使用户能够为D3图表添加参数。我似乎无法弄清楚如何将true与global-filter-directive
我试过注射两个控制器，但我想我错过了一些关于它应该如何工作的重要事项。
允许用户切换复选框的功能，然后通过添加或删除来更新D3图表数据。
这是我的代码：
metrics-over-time-directive (function GlobalfilterDirective() {
"use strict";
angular
.module("va.challenge.frontend")
.directive("globalFilterDirective", GlobalFilterDirective);
/** @ngInject */
function GlobalFilterDirective() {
/*
nv and d3 are defined in index.constants.js as
injectible dependencies instead as window global
*/
var config = {
restrict: "E",
templateUrl: "app/components/global-filter-directive/global-filter-directive.tmpl.html",
controller: GlobalFilterController,
controllerAs: "vm",
bindToController: true,
scope: true,
link: postLink
};
return config;
}
function postLink(scope, iEl, iAttrs, vm) {
var dataWatcher = scope.$watch("vm.data", doSomething);
scope.$on("$destroy", destroyWatchers);
// iEl.on("click", function (el) {
// console.log('click: ');
// });
function doSomething(newValue) {
// var d3Format = d3.format("05d");
// var value = newValue[3].value;
// vm.rawValue = value;
// vm.formattedValue = d3Format(value);
//
// console.log("vm: ", vm.formattedValue);
vm.update = function(el){console.log(el)};
}
function destroyWatchers() {
dataWatcher();
}
}
/** @ngInject */
function GlobalFilterController() {
var vm = this;
vm.data = {
desktop:[{
label: "Chrome",
value: true
}, {
label: "Firefox",
value: false
}, {
label: "IE",
value: false
}, {
label: "Safari",
value: false
}],
mobile:[{
label: "Chrome",
value: "false"
},{
label: "Android Webkit",
value: false
},{
label: "Safari",
value: false
}],
metrics:[{
label: "Impressions",
value: "false",
},{
label: "Click Through Rate",
value: false
},{
label: "Clicks",
value: false
},{
label: "25% Rate",
value: false
},{
label: "50% Rate",
value: false
},{
label: "75% Rate",
value: false
},{
label: "Completion Rate",
value: false
},{
label: "First Quartile",
value: false
},{
label: "Midpoint",
value: false
},{
label: "Third Quartile",
value: false
},{
label: "Completions",
value: false
}]
};
}
})();
/*
Global Directive that will display all possible browsers and metrics
*/
(function MetricsOverTimeDirective() {
"use strict";
angular
.module("va.challenge.frontend")
.directive("overTimeDirective", OverTimeDirective);
/** @ngInject */
function OverTimeDirective() {
/*
nv and d3 are defined in index.constants.js as
injectible dependencies instead as window global
*/
var config = {
restrict: "E",
templateUrl: "app/components/metrics-over-time-directive/metrics-over-time-directive.tmpl.html",
controller: OverTimeController,
controllerAs: "vm",
bindToController: true,
scope: true
// link: postLink
};
return config;
}
/** @ngInject */
function OverTimeController(MockAPI, d3, nv) {
var data;
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var format = d3.time.format("%d-%b-%y");
var numberFormat = d3.time.format(",");
var json = { browser: ["chrome", "firefox", "ie", "safari",
"chrome-mobile", "androidwebkit"]
};
var userSelections = ['chrome'];
var user = function(){ console.log('clicked')};
//Data request to API provider
MockAPI.get(json).then( function(json) {
data = json;
var dates = [];
nv.addGraph(function() {
var chart = nv.models.lineChart()
.useInteractiveGuideline(true)
.color(['#d93344', '#53dbd0', '#9d4dc5', '#5486d1']);
// .color(d3.scale.category10().range());
var fitScreen = false;
var width = 600;
var height = 300;
var zoom = 1;
chart.xAxis
.axisLabel("Date")
.tickValues(dates)
.showMaxMin(false)
.staggerLabels(true)
.tickFormat(function(d) {
return d3.time.format("%b %d")(new Date(d))
}); //removed %Y => year
chart.yAxis
.axisLabel('Impressions')
.tickPadding(10)
.staggerLabels(true)
.tickFormat(d3.format(',.2f'));
d3.select('#chart1 svg')
.attr('perserveAspectRatio', 'xMinYMid')
.attr('width', width)
.attr('height', height)
.datum(chartData(json));
setChartViewBox();
resizeChart();
nv.utils.windowResize(resizeChart);
// d3.select('#zoomIn').on('click', zoomIn);
// d3.select('#zoomOut').on('click', zoomOut);
function setChartViewBox() {
var w = width * zoom,
h = height * zoom;
chart
.interpolate("cardinal")
.width(w)
.height(h);
d3.select('#chart1 svg')
.attr('viewBox', '0 0 ' + w + ' ' + h)
.transition().duration(500)
.call(chart);
}
function resizeChart() {
var container = d3.select('#chart1');
var svg = container.select('svg');
if (fitScreen) {
// resize based on container's width AND HEIGHT
var windowSize = nv.utils.windowSize();
svg.attr("width", windowSize.width);
svg.attr("height", windowSize.height);
} else {
// resize based on container's width
var aspect = chart.width() / chart.height();
var targetWidth = parseInt(container.style('width'));
svg.attr("width", targetWidth);
svg.attr("height", Math.round(targetWidth / aspect));
}
}
return chart;
});
function click (e) {
console.log(e);
}
function chartData(json, browers) {
var vmData = {
"first": [],
"mid": [],
"third": [],
"completeImpr": []
};
dates.push(Date.parse(el.date));
if (el.browser === 'chrome') {
vmData.mid.push( {
"type": el.browser,
"y": el.midpointImpressions,
"l": "hello",
"x": Date.parse(el.date)
});
vmData.first.push({
"type": el.browser,
"y": el.firstQuartileImpressions,
"l": "hello",
"x": Date.parse(el.date)
});
vmData.third.push( {
"type": el.browser,
"y": el.thirdQuartileImpressions,
"l": "hello",
"x": Date.parse(el.date)
});
vmData.completeImpr.push( {
"type": el.browser,
"y": el.completeImpressions,
"l": "hello",
"x": Date.parse(el.date)
});
}
});
console.log(vmData);
return [
{
values: vmData.first,
key: "firstQuartileImpressions",
fill: "#2ca02c"
},
{
values: vmData.mid,
key: "midpointImpressions",
fill: "pink"
},
{
values: vmData.third,
key: "thirdpointImpressions",
fill: "orange"
},
{
values: vmData.completeImpr,
key: "completeImpressions",
fill: "yellow"
}
];
}
// console.log(data, null, '\t');
});
}
})();