Angularjs 角度+；d3和x2B；Json数据_Angularjs_Json_D3.js

Angularjs 角度+；d3和x2B；Json数据

angularjs json d3.js

Angularjs 角度+；d3和x2B；Json数据,angularjs,json,d3.js,Angularjs,Json,D3.js,我正在尝试使用d3和angular构建一个简单的可视化。viz应该基于DashDB请求中的JSON数据。我不能达到这个结果，但我不知道为什么。我从一个使用javascript硬编码数据的示例开始：。我想要dashdb请求的数据。这是我的密码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>AngularJS + D3.js</title&g

我正在尝试使用d3和angular构建一个简单的可视化。viz应该基于DashDB请求中的JSON数据。我不能达到这个结果，但我不知道为什么。我从一个使用javascript硬编码数据的示例开始：。我想要dashdb请求的数据。这是我的密码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>AngularJS + D3.js</title>
    <script src="http://d3js.org/d3.v3.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
    <script src="app.js"></script>
    <link rel="stylesheet" type="text/css" href="app.css">
</head>
<body>
    <div ng-app="chartApp" ng-controller="tempController">
        <h1>Today's temperatures</h1>
        <div linear-chart chart-data="tempData"></div>
    </div>
</body>
</html>


AngularJS+D3.js
今天的温度

Javascript:

var app = angular.module('chartApp', []);
app.controller('tempController', ['$scope', function($scope){
d3.json('https://mynoderedstarter.eu-gb.mybluemix.net/test1', function(err, temps){
    if(err) throw err;

        $scope.tempData = temps;

});
}]);

app.directive('linearChart', function($window){
   return{
  restrict:'EA',
  template:"<svg width='850' height='200'></svg>",
   link: function(scope, elem, attrs){
       console.log(scope.tempData);
       var tempDataToPlot=scope[attrs.chartData];
       var padding = 20;
       var pathClass="path";
       var xScale, yScale, xAxisGen, yAxisGen, lineFun;

       var d3 = $window.d3;
       var rawSvg=elem.find('svg');
       var svg = d3.select(rawSvg[0]);

       function setChartParameters(){

           xScale = d3.scale.linear()
               .domain([tempDataToPlot[0].HOURS, tempDataToPlot[tempDataToPlot.length-1].HOURS])
               .range([padding + 5, rawSvg.attr("width") - padding]);

           yScale = d3.scale.linear()
               .domain([0, d3.max(tempDataToPlot, function (d) {
                   return d.TEMP;
               })])
               .range([rawSvg.attr("height") - padding, 0]);

           xAxisGen = d3.svg.axis()
               .scale(xScale)
               .orient("bottom")
               .ticks(tempDataToPlot.length - 1);

           yAxisGen = d3.svg.axis()
               .scale(yScale)
               .orient("left")
               .ticks(5);

           lineFun = d3.svg.line()
               .x(function (d) {
                   return xScale(d.HOURS);
               })
               .y(function (d) {
                   return yScale(d.TEMP);
               })
               .interpolate("basis");
       }

     function drawLineChart() {

           setChartParameters();

           svg.append("svg:g")
               .attr("class", "x axis")
               .attr("transform", "translate(0,180)")
               .call(xAxisGen);

           svg.append("svg:g")
               .attr("class", "y axis")
               .attr("transform", "translate(20,0)")
               .call(yAxisGen);

           svg.append("svg:path")
               .attr({
                   d: lineFun(tempDataToPlot),
                   "stroke": "blue",
                   "stroke-width": 2,
                   "fill": "none",
                   "class": pathClass
               });
       }

       drawLineChart();
   }
   };
});

var-app=angular.module（'chartApp'，[]）；
app.controller（'tempController'，['$scope'，函数（$scope）{
d3.json（'https://mynoderedstarter.eu-gb.mybluemix.net/test1，函数（错误，临时）{
如果（错误）抛出错误；
$scope.tempData=temps；
});
}]);
应用指令（'linearChart'，函数（$window）{
返回{
限制：'EA'，
模板：“”，
链接：功能（范围、要素、属性）{
console.log（scope.tempData）；
var tempDataToPlot=scope[attrs.chartData]；
var=20；
var pathClass=“path”；
var xScale、yScale、xAxisGen、yAxisGen、lineFun；
变量d3=$window.d3；
var rawSvg=elem.find（'svg'）；
var svg=d3.select（rawSvg[0]）；
函数setChartParameters（）{
xScale=d3.scale.linear（）
.domain（[tempDataToPlot[0].HOURS，tempDataToPlot[tempDataToPlot.length-1].HOURS]）
.range（[padding+5，rawSvg.attr（“width”）-padding]）；
yScale=d3.scale.linear（）
.domain（[0，d3.max（tempDataToPlot，函数（d））{
返回d.TEMP；
})])
.range（[rawSvg.attr（“height”）-padding，0]）；
xAxisGen=d3.svg.axis（）
.scale（xScale）
.orient（“底部”）
.ticks（tempDataToPlot.length-1）；
yAxisGen=d3.svg.axis（）
.刻度（yScale）
.东方（“左”）
.蜱（5）；
lineFun=d3.svg.line（）
.x（功能（d）{
返回xScale（d.HOURS）；
})
.y（功能（d）{
返回yScale（d.TEMP）；
})
.插入（“依据”）；
}
函数drawLineChart（）{
setChartParameters（）；
append（“svg:g”）
.attr（“类”、“x轴”）
.attr（“转换”、“翻译（0180）”）
.呼叫（XaxiGen）；
append（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“翻译（20,0）”）
.呼叫（亚西根）；
append（“svg:path”）
艾特先生({
d:lineFun（tempDataToPlot），
“笔划”：“蓝色”，
“笔划宽度”：2，
“填充”：“无”，
“类”：路径类
});
}
绘图线图（）；
}
};
});

根本没有结果（没有显示任何内容）。我在控制台中遇到了以下错误：错误：undefined不是对象（正在计算“tempDataToPlot[0]”）

scope.tempData未定义，但scope包含一个tempData对象，该对象由一个包含我的数据的数组填充

任何帮助都将不胜感激。

谢谢

结果如何？你能描述一下你看到的问题行为吗？根本没有结果。我在控制台中遇到此错误：错误：undefined不是对象（正在计算“tempDataToPlot[0]”）。如果我记录scope.tempData，它是未定义的。但是如果我只记录scope，我可以看到属性tempData很好地填充了一个包含我的数据的数组。d3响应中是否定义了$scope.tempData？因此，在app.directive中无法访问。我猜要么将app.directive函数包含在d3.json函数中，要么将$scope作为全局变量。你可能是对的。看起来d3.json是用来直接在回调函数中处理结果的。我不知道是否有可能使结果在外部可见。我试图在回调函数中设置App.Read，但是角度不能开始……我想我必须考虑其他解决方案，而不是D3.JSON函数来获取数据。