Javascript 在d3中通过角度绘制日期与频率的折线图_Javascript_Angularjs_D3.js_Svg_Linechart

Javascript 在d3中通过角度绘制日期与频率的折线图

javascript angularjs d3.js svg

Javascript 在d3中通过角度绘制日期与频率的折线图,javascript,angularjs,d3.js,svg,linechart,Javascript,Angularjs,D3.js,Svg,Linechart,我试图在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/aj

我试图在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>

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


//模块声明
var-app=angular.module（'myApp'，[]）；
//控制器声明
应用程序控制器（'myCtrl'，函数（$scope）{
//自定义数据
风险值数据=[
{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（“宽度”）；
var svgHeight=mySVG.attr（“高度”）；
var边距={顶部：20，右侧：20，底部：20，左侧：50}；
var xRange=d3.scale.linear（）
.range（[margins.left，svgWidth-margins.right]）
.domain（[d3.min（数据，函数（d）{return d.x；}），d3.max（数据，函数（d）{return d.x；}]）；
var yRange=d3.scale.linear（）
.range（[svghight-margins.top，margins.bottom]）
.domain（[d3.min（数据，函数（d）{return d.y；}），d3.max（数据，函数（d）{return d.y；}]）；
var xAxis=d3.svg.axis（）
.刻度（X范围）
.尺寸（5）
.tickde（真）；
var yAxis=d3.svg.axis（）
.刻度（Y量程）
.尺寸（5）
.东方（“左”）
.tickde（真）；
追加（“svg:g”）
.attr（“类”、“x轴”）
.attr（“转换”、“转换（0）”+（svghight-margins.bottom）+”）
.呼叫（xAxis）；
追加（“svg:g”）
.attr（“类”、“y轴”）
.attr（“转换”、“转换”（+（margins.left）+“，0）”）
.呼叫（yAxis）；
var lineFunc=d3.svg.line（）
.x（功能（d）{
返回x范围（d.x）；
})
.y（功能（d）{
返回y范围（d.y）；
})
.插入（“线性”）；
追加（“svg:path”）
.attr（“d”，lineFunc（数据））
.attr（“笔划”、“蓝色”）
.attr（“笔划宽度”，2）
.attr（“填充”、“无”）；
});

**错误：**

var xRange=d3.scale.linear（）您使用的是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...

对于直线生成器，更改曲线的插值
另外，去掉tickSubdivide

编辑：您的小提琴还有其他问题：值是字符串，但它们应该是数字。除此之外，如果使用日期，则必须解析它们
这是你的小提琴，不使用日期：d3.axisLeft（…）.scale（…）.tickSize（…）.orient不是函数你要我写小提琴吗？是的，复制它。。。所以它运行。正如你所说的，我仍然面临上述错误。我已经更新了我的代码和我面临的错误。我明白了。你为什么不做一把小提琴，这样我们就可以改变它了？毕竟，这是你的兴趣所在。我在这里得到的唯一东西是（很少）一张赞成票。
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...