d3画散点图

来源：互联网发布：行车记录仪支架淘宝编辑：程序博客网时间：2024/05/19 23:16
代码如下：
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        .axis path,.axis line{            fill:none;            stroke: black;            shape-rendering: crispEdges;        }    </style></head><body>    <script type="text/javascript" src = "http://d3js.org/d3.v3.min.js"></script>    <script type="text/javascript">        var dataset = [[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 width = 600;        var height = 600;        var xAxisWidth = 300;        var yAxisWidth = 300;        var color = d3.scale.category10();        var svg = d3.select("body").append("svg")                    .attr("width",width)                    .attr("height",height);        var padding = {top:20,bottom:20,left:50,right:50}        //x轴比例尺        var xScale = d3.scale.linear()                        .domain([0,1.2 * d3.max(dataset,function(d){                            return d[0];                        })])                        .range([0,xAxisWidth]);        var yScale = d3.scale.linear()                        .domain([0,1.2 * d3.max(dataset,function(d){                            return d[1];                        })])                        .range([0,yAxisWidth]);        var circle = svg.selectAll("circle")                        .data(dataset)                        .enter()                        .append("circle")                        .attr("fill",function(d,i){                            return color(i);                        })                        .attr("cx",function(d,i){                            return padding.left + xScale(d[0])                        })                        .attr("cy",function(d,i){                            return height - padding.bottom - yScale(d[1])                        })                        .attr("r",5);        // x轴        var xAxis = d3.svg.axis()                    .scale(xScale)                    .orient("bottom")                    .ticks(5)        //y轴        var yAxis = d3.svg.axis()                    .scale(yScale)                    .orient("left")                    .ticks(5)        //画x轴        svg.append("g")            .attr("class","axis")            .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) + ")")            .call(xAxis);        //y轴        yScale.range([yAxisWidth,0])        svg.append("g")            .attr("class","axis")            .attr("transform","translate(" + padding.left + "," + (height - yAxisWidth - padding.bottom) + ")")            .call(yAxis);    </script></body></html>
运行结果如下图所示：
这里写图片描述
阅读全文
0 0