d3.js 创建散点图

来源：互联网发布：宣传单设计用什么软件编辑：程序博客网时间：2024/05/10 09:39
最近学d3，对着书中的例子敲了一遍
<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>散点图</title>    <script src="d3/d3.js"></script>    <script src="jquery-2.2.4.js"></script>    <style>        .axis path,        .axis line{            fill: none;            stroke: black;            shape-rendering: crispEdges;        }    </style></head><body><script type="application/javascript">    //定义图像大小、坐标轴大小    var svgWidth = 600;    var svgHeight = 600;    var xAxisWidth = 500;    var yAxisWidth = 500;    var padding = {top:30,bottom:30,left:50,right:30};    //圆心数据    var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],        [0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];    //定义比例尺    var xScale = d3.scale.linear()            .domain([0,1.2*d3.max(center,function(d){                return d[0];            })])            .range([0,xAxisWidth]);    var yScale = d3.scale.linear()            .domain([0,1.2*d3.max(center, function (d) {                return d[1];            })])            .range([0,yAxisWidth]);    //数据写入选择集：创建svg，创建图像（update、enter、exit），确定坐标、响应与其他属性    var svg = d3.select("body").append("svg")            .attr("width",svgWidth)            .attr("height",svgHeight);    var circles = svg.selectAll("circle")            .data(center)            .enter()            .append("circle")            .attr("fill","black")            .attr("cx",function(d){                return padding.left+xScale(d[0]);            })            .attr("cy",function(d){                return svgHeight-padding.bottom-yScale(d[1]);            })            .attr("r",8);    circles.on("click",function(d,i){        alert(d+"  "+i);    });    //显示坐标轴    var xSvgAxis = svg.append("g")            .attr("class","axis")            .attr("transform","translate("+padding.left+","+(svgHeight-padding.bottom)+")");    var ySvgAxis = svg.append("g")            .attr("class","axis")            .attr("transform","translate("+padding.left+","+(svgHeight-padding.bottom-yAxisWidth)+")");    var xAxis = d3.svg.axis()            .scale(xScale)            .orient("bottom");    yScale.range([yAxisWidth,0]);    var yAxis = d3.svg.axis()            .scale(yScale)            .orient("left");    xSvgAxis.call(xAxis);    ySvgAxis.call(yAxis);</script></body></html>
0 0