繪制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)' });新聞熱點
疑難解答
