0

この記事で説明されている例を実行しようとしています

私のhtml

    <!doctype html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title>Form</title>
    <link rel="stylesheet" href="css/app.css">
    <!--<link rel="stylesheet" href="css/bootstrap.css">-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <script src="lib/angular/angular.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <link href="css/bootstrap-responsive.css" rel="stylesheet">
    <script src="js/dir.js"></script>
    <script>

    </script>
</head>
<body>

    {{2+2}}

    <!-- Invoke the directive -->
    <div ng-sparkline ng-city="San Francisco"></div>
    {{weather}}

<script src="js/bootstrap.min.js"></script>

</body>
</html>

記事の最後の js コード:

// Code goes here
var app = angular.module('myApp', []);

app.directive('ngSparkline', function() {
    var url = "http://api.openweathermap.org/data/2.5/forecast/daily?mode=json&units=imperial&cnt=14&callback=JSON_CALLBACK&q=";
    return {
        restrict: 'A',
        require: '^ngCity',
        transclude: true,
        scope: {
            ngCity: '@'
        },
        template: '<div class="sparkline"><div ng-transclude></div><div class="graph"></div></div>',
        controller: ['$scope', '$http', function($scope, $http) {
            $scope.getTemp = function(city) {
                $http({
                    method: 'JSONP',
                    url: url + city
                }).success(function(data) {
                        var weather = [];
                        angular.forEach(data.list, function(value){
                            weather.push(value);
                        });
                        $scope.weather = weather;
                    });
            }
        }],
        link: function(scope, iElement, iAttrs, ctrl) {
            scope.getTemp(iAttrs.ngCity);
            scope.$watch('weather', function(newVal) {
                // the `$watch` function will fire even if the
                // weather property is undefined, so we'll
                // check for it
                if (newVal) {
                    var highs = [];

                    angular.forEach(scope.weather, function(value){
                        highs.push(value.temp.max);
                    });

                    chartGraph(iElement, highs, iAttrs);
                }
            });
        }
    }
});

var chartGraph = function(element, data, opts) {
    var width = opts.width || 200,
        height = opts.height || 80,
        padding = opts.padding || 30;

    // chart
    var svg     = d3.select(element[0])
        .append('svg:svg')
        .attr('width', width)
        .attr('height', height)
        .attr('class', 'sparkline')
        .append('g')
        .attr('transform', 'translate('+padding+', '+padding+')');

    svg.selectAll('*').remove();

    var maxY    = d3.max(data),
        x       = d3.scale.linear()
            .domain([0, data.length])
            .range([0, width]),
        y       = d3.scale.linear()
            .domain([0, maxY])
            .range([height, 0]),
        yAxis = d3.svg.axis().scale(y)
            .orient('left')
            .ticks(5);

    svg.append('g')
        .attr('class', 'axis')
        .call(yAxis);

    var line    = d3.svg.line()
            .interpolate('linear')
            .x(function(d,i){return x(i);})
            .y(function(d,i){return y(d);}),
        path    = svg.append('svg:path')
            .data([data])
            .attr('d', line)
            .attr('fill', 'none')
            .attr('stroke-width', '1');
}

app.directive('ngCity', function() {
    return {
        controller: function($scope) {}
    }
});

私が理解しているように、コードは配置された魔女の「ng-sparkline」ディレクティブの「div」を置き換える必要があります。しかし、それは何もしません(

私の試みでjsfiddle http://jsfiddle.net/dRSR8/

私が間違っていることを見つけるのを手伝ってもらえますか? ありがとうございました！

4

1 に答える 1

1

2つのこと：

AngularJS の「onLoad」を含める代わりに、「No Wrap - in head」(または「No wrap - in body」も機能します) に配置します。このオプションは、左側の「フレームワークと拡張機能」の下に表示されます。

次に、D3 を使用しているため、[外部リソース] の下に移動して、http: //d3js.org/d3.v3.min.jsを追加します。

于 2013-10-12T00:19:22.090 に答える