angular 在 d3 中绘制带有日期与频率的折线图

Question

我想在 d3 中制作一个简单的图表，我在其中绘制日期（作为字符串）与频率的关系。但是，我收到错误。有人可以帮我吗？

片段：

<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

  <svg width="1000" height="500"></svg>

<script>
//module declaration 
var app = angular.module('myApp',[]);

//Controller declaration
app.controller('myCtrl', function($scope){

    //custom data 
    var data = [
        {x: "2016-01-10", y: "10.02"},
        {x: "2016-02-10", y: "15.05"},
        {x: "2016-03-10", y: "50.02"},
        {x: "2016-04-10", y: "40.01"},
        {x: "2016-05-10", y: "10.08"},
        {x: "2016-06-10", y: "29.07"},
        {x: "2016-07-10", y: "45.02"}
    ];

    var mySVG = d3.select("svg");
    var svgWidth = mySVG.attr("width");
    var svgHeight = mySVG.attr("height");
    var margins = {top: 20,right: 20,bottom: 20,left: 50};

    var xRange = d3.scale.linear()
      .range([margins.left, svgWidth - margins.right])
      .domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]);

    var yRange = d3.scale.linear()
      .range([svgHeight - margins.top, margins.bottom])
      .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]);

    var xAxis = d3.svg.axis()
                .scale(xRange)
                .tickSize(5)
                .tickSubdivide(true);

    var yAxis = d3.svg.axis()
                .scale(yRange)
                .tickSize(5)
                .orient("left")
                .tickSubdivide(true);


        mySVG.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")")
          .call(xAxis);

        mySVG.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (margins.left) + ",0)")
          .call(yAxis);

        var lineFunc = d3.svg.line()
        .x(function (d) {
          return xRange(d.x);
        })
        .y(function (d) {
          return yRange(d.y);
        })
        .interpolate('linear');

      mySVG.append("svg:path")
        .attr("d", lineFunc(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");
  });

</script> 

</body> 

</html>

** 错误：**

        var xRange = d3.scale.linear() <<<<< Error line

请帮我制作折线图以及 x 和 y 轴，并在上面绘制日期和频率。请帮忙。

更新的代码段：

<html>

<head>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.12/angular.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>

</head> 

<body ng-app="myApp" ng-controller="myCtrl"> 

  <svg width="1000" height="500"></svg>

<script>
//module declaration 
var app = angular.module('myApp',[]);

//Controller declaration
app.controller('myCtrl', function($scope){

    //custom data 
    var data = [
        {x: "2016-01-10", y: "10.02"},
        {x: "2016-02-10", y: "15.05"},
        {x: "2016-03-10", y: "50.02"},
        {x: "2016-04-10", y: "40.01"},
        {x: "2016-05-10", y: "10.08"},
        {x: "2016-05-10", y: "29.07"},
        {x: "2016-05-10", y: "45.02"}
    ];

    var mySVG = d3.select("svg");
    var svgWidth = mySVG.attr("width");
    var svgHeight = mySVG.attr("height");
    var margins = {top: 20,right: 20,bottom: 20,left: 50};

    var xRange = d3.scaleLinear()
      .range([margins.left, svgWidth - margins.right])
      .domain([d3.min(data, function (d) {return d.x;}), d3.max(data, function (d) {return d.x;}) ]);

    var yRange = d3.scaleLinear()
      .range([svgHeight - margins.top, margins.bottom])
      .domain([d3.min(data, function (d) { return d.y; }), d3.max(data, function (d) { return d.y;}) ]);

    var xAxis = d3.axisBottom(xRange)
                .scale(xRange)
                .tickSize(5);

    var yAxis = d3.axisLeft(yRange)
                .scale(yRange)
                .tickSize(5)
                .orient("left");


        mySVG.append("svg:g")
          .attr("class", "x axis")
          .attr("transform", "translate(0," + (svgHeight - margins.bottom) + ")")
          .call(xAxis);

        mySVG.append("svg:g")
          .attr("class", "y axis")
          .attr("transform", "translate(" + (margins.left) + ",0)")
          .call(yAxis);

        var lineFunc = d3.line()
        .x(function (d) {
          return xRange(d.x);
        })
        .y(function (d) {
          return yRange(d.y);
        })
        .curve(d3.curveLinear);

      mySVG.append("svg:path")
        .attr("d", lineFunc(data))
        .attr("stroke", "blue")
        .attr("stroke-width", 2)
        .attr("fill", "none");
  });

</script> 

</body> 

</html>

新错误：

Answer 1

您使用的是 d3 v4.x，而不是旧的 v3。因此，您必须修改代码。

这些是必要的更改：

var xRange = d3.scaleLinear()//keep the domain and range

var yRange = d3.scaleLinear()//keep the domain and range

var xAxis = d3.axisBottom(xRange)
    .tickSize(5);

var yAxis = d3.axisLeft(yRange)
    .tickSize(5);

var lineFunc = d3.line()//etc...

对于线生成器，将 interpolate 更改为 curve。

此外，删除 tickSubdivide。

编辑：您的 fiddle 中还有其他问题：值是字符串，但它们应该是数字。除此之外，如果您使用日期，则必须解析它们。

这是你的 fiddle，没有使用日期：https://jsfiddle.net/gerardofurtado/fawe63t8/

angular 在 d3 中绘制带有日期与频率的折线图

Plotting line chart with date vs frequency in d3 by angular

javascript

svg

linechart

d3.js

angularjs