Biblioteca de trazado basada en SVG simple-D3xter. js

Vista prévia

Descripción

D3xter. js es una biblioteca de trazado JS Super ligero para crear gráficos simples & gráficos usando < a href = "https:/d3js.org/" target = "_ blank" rel = "noopener" > D3. js y Canvas & elementos SVG .

Funcionamiento

Incluya D3. js desde una red CDN.

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.13/d3.min.js"></script>

Incluya D3xter. js y style. CSS en el documento.

<link href="css/style.css" rel="stylesheet">
<script src="js/lib.js"></script>

Prepare el DataSet como sigue.

var x = [];
var y = [];
var z = [];

Configuración del gráfico.

var config = {

//x-axis label (defaults to '')
xLab: 'random x-values',

 //y-axis label (defaults to '')
yLab: 'random y-values',

 //Selector for DOM element to append the plot to (defaults to < body >)
selector: '#elementID-2',

 //pixel width (defaults to 500)
width: 500,

 //pixel height (defaults to 500)
height: 500,

 //size and sizeLab are used in bubble charts like the top-right example.
//array of numeric values which map to sizes of the circles plotted at the corresponding x-y point (defaults to undefined for a standard scatter)
size: z,

 //label for size values (defaults to '')
sizeLab: 'random size values'

 }

Represente un gráfico dentro del contenedor de destino.

var histogram = histo(data, config);
var scatter = scatter(x,y,config);
var lineGraph = xyPlot(x,y,config);