如何使用带有json数据的d3.js使用angular指令绘制多线系列图

Question

我提到了这个url。实际上这个图包含csv数据。但我是json数据。我试图用angular指令绘制图形。我怎么能这样做。可以有人请帮我解决这个问题...

我在js中的角度指令：

angular.module('myApp').directive('multiLine', [
  function () {
      return {
         restrict: 'E',
         scope: {
            data: '='
         },
         link: function (scope, element) {

    var data = [{
    "date": "20111001",
        "New York": "63.4",
        "San Francisco": "62.7",
        "Austin": "72.2"
}, {
    "date": "20111002",
        "New York": "58.0",
        "San Francisco": "59.9",
        "Austin": "67.7"
}, {
    "date": "20111003",
        "New York": "53.3",
        "San Francisco": "59.1",
        "Austin": "69.4"
}];

    var margin = {
    top: 20,
    right: 80,
    bottom: 30,
    left: 50
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y%m%d").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.category10();

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .interpolate("basis")
    .x(function (d) {
    return x(d.date);
})
    .y(function (d) {
    return y(d.temperature);
});

var svg = d3.select(element[0]).append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

color.domain(d3.keys(data[0]).filter(function (key) {
    return key !== "date";
}));

data.forEach(function (d) {
    d.date = parseDate(d.date);
});

var cities = color.domain().map(function (name) {
    return {
        name: name,
        values: data.map(function (d) {
            return {
                date: d.date,
                temperature: +d[name]
            };
        })
    };
});

x.domain(d3.extent(data, function (d) {
    return d.date;
}));

y.domain([
d3.min(cities, function (c) {
    return d3.min(c.values, function (v) {
        return v.temperature;
    });
}),
d3.max(cities, function (c) {
    return d3.max(c.values, function (v) {
        return v.temperature;
    });
})]);

svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Temperature (ºF)");

var city = svg.selectAll(".city")
    .data(cities)
    .enter().append("g")
    .attr("class", "city");

city.append("path")
    .attr("class", "line")
    .attr("d", function (d) {
    return line(d.values);
})
    .style("stroke", function (d) {
    return color(d.name);
});

city.append("text")
    .datum(function (d) {
    return {
        name: d.name,
        value: d.values[d.values.length - 1]
    };
})
    .attr("transform", function (d) {
    return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
})
    .attr("x", 3)
    .attr("dy", ".35em")
    .text(function (d) {
    return d.name;
});


         }
      };
  }
]);

我的HTML：

   <multiLine></multiLine>

Answer 1

阅读normalization上的角度指令文档中的部分：

  

Angular规范化元素的标记和属性名称以确定   哪些元素匹配哪些指令。我们通常会提到   它们区分大小写的camelCase规范化名称的指令（例如   ngModel）。但是，由于HTML不区分大小写，我们参考   DOM中的指令通过小写形式，通常使用   DOM元素上的破折号分隔属性（例如ng-model）。

所以你的HTML应该是：

<multi-line></multi-line>

工作代码：

＆＃13;

＆＃13;

angular.module('myApp', []);

angular.module('myApp').directive('multiLine', [
  function() {
    return {
      restrict: 'E',
      scope: {
        data: '='
      },
      link: function(scope, element) {

        var data = [{
          "date": "20111001",
          "New York": "63.4",
          "San Francisco": "62.7",
          "Austin": "72.2"
        }, {
          "date": "20111002",
          "New York": "58.0",
          "San Francisco": "59.9",
          "Austin": "67.7"
        }, {
          "date": "20111003",
          "New York": "53.3",
          "San Francisco": "59.1",
          "Austin": "69.4"
        }];

        var margin = {
            top: 20,
            right: 80,
            bottom: 30,
            left: 50
          },
          width = 960 - margin.left - margin.right,
          height = 500 - margin.top - margin.bottom;

        var parseDate = d3.time.format("%Y%m%d").parse;

        var x = d3.time.scale()
          .range([0, width]);

        var y = d3.scale.linear()
          .range([height, 0]);

        var color = d3.scale.category10();

        var xAxis = d3.svg.axis()
          .scale(x)
          .orient("bottom");

        var yAxis = d3.svg.axis()
          .scale(y)
          .orient("left");

        var line = d3.svg.line()
          .interpolate("linear")
          .x(function(d) {
            return x(d.date);
          })
          .y(function(d) {
            return y(d.temperature);
          });

        var svg = d3.select(element[0]).append("svg")
          .attr("width", width + margin.left + margin.right)
          .attr("height", height + margin.top + margin.bottom)
          .append("g")
          .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        color.domain(d3.keys(data[0]).filter(function(key) {
          return key !== "date";
        }));

        data.forEach(function(d) {
          d.date = parseDate(d.date);
        });

        var cities = color.domain().map(function(name) {
          return {
            name: name,
            values: data.map(function(d) {
              return {
                date: d.date,
                temperature: +d[name]
              };
            })
          };
        });

        x.domain(d3.extent(data, function(d) {
          return d.date;
        }));

        y.domain([
          d3.min(cities, function(c) {
            return d3.min(c.values, function(v) {
              return v.temperature;
            });
          }),
          d3.max(cities, function(c) {
            return d3.max(c.values, function(v) {
              return v.temperature;
            });
          })
        ]);

        svg.append("g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + height + ")")
          .call(xAxis);

        svg.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")
          .text("Temperature (ºF)");

        var city = svg.selectAll(".city")
          .data(cities)
          .enter().append("g")
          .attr("class", "city");
        
        city.selectAll(".points")
          .data(function(d){
            return d.values;
          })
          .enter()
          .append("circle")
          .attr("cx", function(d){
             return x(d.date);
          })
          .attr("cy", function(d){
            return y(d.temperature);
          })
          .attr("r", 5)
          .style("fill", function(d,i,j){
            return color(cities[j].name);      
          });

        city.append("path")
          .attr("class", "line")
          .attr("d", function(d) {
            return line(d.values);
          })
          .style("stroke", function(d) {
            return color(d.name);
          });

        city.append("text")
          .datum(function(d) {
            return {
              name: d.name,
              value: d.values[d.values.length - 1]
            };
          })
          .attr("transform", function(d) {
            return "translate(" + x(d.value.date) + "," + y(d.value.temperature) + ")";
          })
          .attr("x", 3)
          .attr("dy", ".35em")
          .text(function(d) {
            return d.name;
          });
      }
    };
  }
]);

＆＃13;

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
  <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
  <script data-require="jquery@2.1.4" data-semver="2.1.4" src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <script src="module.js"></script>

<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.x.axis path {
  display: none;
}

.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

</style>
</head>

<body>
    <multi-line></multi-line>
</body>

</html>

＆＃13;

＆＃13;

＆＃13;