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

Question

我引用了这个URL 。实际上这个图包含csv数据。但是我有json数据。并且我正在尝试使用angular指令绘制一个图。我该怎么做。有人可以帮我解决这个问题...

我在js中的angular指令：

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

阅读angular指令文档中有关规范化的部分 ：

Angular对元素的标记和属性名称进行归一化，以确定哪些元素与哪些指令匹配。 我们通常通过区分大小写的camelCase规范化名称（例如ngModel）来引用指令。 但是，由于HTML不区分大小写，因此我们以小写形式引用DOM中的指令，通常在DOM元素（例如ng-model）上使用破折号分隔的属性。

因此，您的html应该是：

<multi-line></multi-line>

---

工作代码：

 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; }); } }; } ]); 

 <!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>