问答详情
源自:2-1 画布制作

请问有课程代码吗?

请问有课程代码吗?

提问者:150155 2020-01-04 10:24

个回答

  • 慕娘2263752
    2020-02-07 16:35:44

    这是我写的第一个曲线的代码,你自己改一下吧

    这是index.html

    <!DOCTYPE html>

    <html>

    <head>

      <meta charset="utf-8">

      <link rel="stylesheet" href="css/style.css" media="screen" type="text/css"/>

    </head>

    <body>

      <div id = "container"></div>

      <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script>

      <script type = "text/javascript"src="js/index.js"></script>

    </body>

    </html>

     ------------------------------------------------------------------------------------------------------------------

    这是style.css

    #container{

      background: #ddd;

      width:500px;

      height:250px;

    }

     

    path{

      fill:none;

      stroke:#4682B4;

      stroke-width:2;

    }

     

    .domain,tick line{

      stroke:grey;

      stroke-width:1;

    }

     

     ------------------------------------------------------------------------------------------------------------------

    这是index.js

    var width = 500,

    height = 250,

    margin = {left:50,top:30,right:20,bottom:20},

    g_width = width-margin.left-margin.right,

    g_height = height-margin.top-margin.bottom;

    //svg

    var svg = d3.select("#container")

    .append("svg")

    //width.height

    .attr("width",width)

    .attr("height",height)

     

    var g = d3.select("svg")

    .append("g")

    .attr("transform","translate("+margin.left+","+margin.top+")")

     

    var data = [1,3,5,7,8,4,3,7]

     

    var scale_x = d3.scale.linear()

    .domain([0,data.length-1])//输入范围

    .range([0,g_width])//输出范围

    var scale_y = d3.scale.linear()

    .domain([0,d3.max(data)])

    .range([g_height,0])

     

    var line_generator = d3.svg.line()

    .x(function(d,i){return scale_x(i);})

    .y(function(d){return scale_y(d);})

    .interpolate("cardinal")

     

    d3.select("g")

    .append("path")

    .attr("d",line_generator(data))

     

    var x_axis = d3.svg.axis().scale(scale_x),

    y_axis = d3.svg.axis().scale(scale_y).orient("left");

     

    g.append("g")

    .call(x_axis)

    .attr("transform","translate(0,"+g_height+")")

     

    g.append("g")

    .call(y_axis)

    .append("text")

    .text("Price($)")

    .attr("transform","rotate(-90)")

    .attr("text-anchor","end")

    .attr("dy","1em")