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。因此，您必须修改代码。

这些是必要的变化：

DBObject or_part1 = new BasicDBObject("_time", new BasicDBObject("$gt", 1479690653366));
DBObject or_part2 = new BasicDBObject("_time", 1479690653366).append("_id", new BasicDBObject("$gt", new ObjectId("5832499d63594c3b24030c19")));
BasicDBList or = new BasicDBList();
or.add(or_part1);
or.add(or_part2);
DBObject query = new BasicDBObject("$or", or);
collection.find(query);

对于线路生成器，请更改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...的{{1}}。

另外，摆脱interpolate。

编辑：你的小提琴中还有其他问题：值是字符串，但它们应该是数字。除此之外，如果你使用日期，你将不得不解析它们。

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

用角度绘制d3中的日期与频率的折线图

1 个答案: