首页 > 代码库 > D3js画坐标系，今天天气真好

D3js画坐标系，今天天气真好

2024-09-15 00:33:26   215人阅读

画坐标系，先上图，再先上代码。

技术分享

 

<html>
<meta charset="utf-8">
<body></body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script type="text/javascript" src="circle.js"></script>
</html>

 

// 描述坐标系的背景的大小
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

//构造线性比例尺，默认域为[0,1]
//详细可参考 https://github.com/d3/d3/wiki/Quantitative-Scales#linear
var x = d3.scaleLinear().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);

//定义背景---在body下添加并定义svg,在svg下添加并定义g幕布， transform是将这个对象相对移动，translate（平移）是移动方式，说明请参考https://github.com/d3/d3/wiki/%E6%95%B0%E5%AD%A6#transform_translate
var svg = d3.select("body").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 + ")");

// 生成X轴
  svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  // 生成Y轴
  svg.append("g")
      .call(d3.axisLeft(y));

D3js画坐标系，今天天气真好


联系
我们