D3js画坐标系，今天天气真好
Posted 不会写超过三篇博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了D3js画坐标系，今天天气真好相关的知识，希望对你有一定的参考价值。
画坐标系，先上图，再先上代码。
<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画坐标系，今天天气真好的主要内容，如果未能解决你的问题，请参考以下文章