d3坐標軸

2024-04-27 15:18:00

字體：大中小

來源：轉載

供稿：網友

1、繪制坐標軸

繪制svg

<div id = "container"></div>----------var svg_w = 500, // svg的寬度 svg_h = 400, // svg的高度 g_left = 50, // 坐標系離svg的左邊距 g_top = 50, // 坐標系離svg的上邊距 g_w = svg_w - 2 * g_left, // 坐標系的寬度 g_h = svg_h - 2 * g_top; // 坐標系的高度// 繪制svg var svg = d3.select('#container').append('svg') .style({ width: svg_w, height: svg_h });

繪制橫坐標

// 橫坐標var scale_x = d3.scale.linear() .domain([0, 10]) // 輸入范圍 .range([0, g_w]); // 輸出范圍var axis_x = d3.svg.axis().scale(scale_x);svg.append('g') .call(axis_x) .classed('axis_x', true) .style({ strokeWidth: '1', stroke: '#aaa', fill: 'none', transform: 'translate('+g_left+'px, '+(g_h+g_top)+'px)' });

繪制縱坐標

// 縱坐標var scale_y = d3.scale.linear() .domain([0, 10]) .range([g_h, 0]); // 由于瀏覽器的y軸和數學上的y軸相反，所有輸出范圍是[num, 0]var axis_y = d3.svg.axis().scale(scale_y).orient('left');svg.append('g') .call(axis_y) .classed('axis_y', true) .style({ strokeWidth: '1', stroke: '#aaa', fill: 'none', transform: 'translate('+g_left+'px, '+g_top+'px)' });

2、坐標軸的其他參數（自定義坐標軸）

var axis_x = d3.svg.axis().scale(scale_x) .orient('top') // 刻度與坐標軸方向 .ticks(5) // 分成5等分，有時d3會根據可用空間和它自己的計算多畫幾個或者少畫幾個 .tickSubdivide(4) // 每個大刻度之間再畫4個等分刻度 .tickPadding(10) // 刻度值與坐標軸之間的距離 .tickFormat(function(v) { // 格式化刻度值 return v + '天'; });

3、坐標軸單位

d3.select('g.axis_y').append('text') .text('價格（元）') .style({ 'transform': 'rotate(-90deg)', 'text-anchor': 'end' // 設置文本的排列屬性start/middle/end }) .attr('dy', '1em')

4、繪制網格線

// 豎直方向的線條d3.selectAll('g.axis_x g.tick') .append('line') .attr({ x1: 0, y1: 0, x2: 0, y2: -g_h })// 水平方向的線條d3.selectAll('g.axis_y g.tick') .append('line') .attr({ x1: 0, y1: 0, x2: g_w, y2: 0 })

上一篇：高并發量網站解決方案

下一篇：31.提示標簽