html 进行重新取样。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 进行重新取样。相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg { font: 10px sans-serif; }
.brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
.brsh .back { fill: none; stroke: black; stroke-width: 1px;}
.line { fill: none; stroke: black; stroke-width: 1px; }
.axis { fill: none; stroke: black; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function Complex(re, im) { this.re = re; this.im = im; };
Complex.prototype.clone = function(){ return new Complex(this.re,this.im); };
Complex.prototype.add = function(z) { this.re += z.re; this.im += z.im; return this; };
Complex.prototype.sub = function(z) { this.re -= z.re; this.im -= z.im; return this; };
Complex.prototype.mul = function(z)
{
var tmp = this.re;
this.re = this.re*z.re - this.im*z.im;
this.im = tmp*z.im + this.im*z.re;
return this;
};
Complex.prototype.div = function(z)
{
var tmp = this.re,
n = z.re*z.re + z.im*z.im;
this.re = (this.re*z.re + this.im*z.im)/n;
this.im = ( -tmp*z.im + this.im*z.re)/n;
return this;
};
var width = 960, height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
svg.append("clipPath")
.attr("id","clip")
.append("rect")
.attr("x",0).attr("y",0)
.attr("width",width/2).attr("height",height);
var mapd = svg.append("g").attr("class","mapd").attr("clip-path","url(#clip)");
var brsh = svg.append("g").attr("class","brsh")
.attr("transform","translate("+width/2+")");
var brsb = brsh.append("g");
var x1 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
var y1 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);
var x2 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
var y2 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);
mapd.append("g").attr("class","axis")
.attr("transform","translate(0,"+height/2+")")
.call(d3.svg.axis().scale(x1).orient("bottom"));
mapd.append("g").attr("class","axis")
.attr("transform","translate("+width/4+")")
.call(d3.svg.axis().scale(y1).orient("left"));
brsh.append("g").attr("class","axis")
.attr("transform","translate(0,"+height/2+")")
.call(d3.svg.axis().scale(x2).orient("bottom"));
brsh.append("g").attr("class","axis")
.attr("transform","translate("+width/4+")")
.call(d3.svg.axis().scale(y2).orient("left"));
var line1 = d3.svg.line()
.x(function(d) { return x1(d.re); })
.y(function(d) { return y1(d.im); });
var line2 = d3.svg.line()
.x(function(d) { return x2(d.re); })
.y(function(d) { return y2(d.im); });
var brush = d3.svg.brush().x(x2).y(y2).on("brush", plot);
brsh.append("rect").attr("class","back")
.attr("width",width/2)
.attr("height",height);
brsh.call(brush);
function plines(sel,data, f)
{
var paths = sel.selectAll('.line').data(data);
paths.enter().append('path').attr('class','line');
paths.attr('d',f);
paths.exit().remove();
}
function f(z) { return z.add((new Complex(1,0)).div(z)) }
function resample(func,eps)
{
function dist(z0,z,z1)
{
var dx10 = z1.re-z0.re, dy10 = z1.im-z0.im;
var dx0 = z.re-z0.re, dy0 = z.im-z0.im;
return Math.pow(dx10*dy0-dy10*dx0,2)/(dx0*dx0+dy0*dy0);
}
var ps = d3.range(-Math.PI,Math.PI,Math.PI/8);
function refStep(dat)
{
for(var i = 0; i < dat.length; i++)
{
var p0 = dat[i], p1 = dat[i+1<dat.length?i+1:0];
var newp = (p0+p1)/2;
if( p1-p0 >= Math.PI || p1-p0 <= -Math.PI ) newp += Math.PI;
if(dist(func(p0),func(newp),func(p1)) > eps) dat.splice(++i,0,newp);
}
}
refStep(ps);
refStep(ps);
refStep(ps);
refStep(ps);
refStep(ps);
return ps.map(func);
}
function plot()
{
if(brush.empty()) return;
ext = brush.extent();
var x0 = (ext[1][0] + ext[0][0])/2;
var y0 = (ext[1][1] + ext[0][1])/2;
var dx = (ext[1][0] - ext[0][0])/2;
var dy = (ext[1][1] - ext[0][1])/2;
var data = d3.range(1/20,1,1/20).map(function(r){
var parametric = function(t){return f(new Complex(x0+r*dx*Math.cos(t),y0+r*dy*Math.sin(t)));}
return resample(parametric,0.0001);});
plines(brsb,
d3.range(1/20,1,1/20).map(function(r){
return d3.range(-Math.PI,Math.PI,Math.PI/20).map(function(p){
return new Complex(x0+r*dx*Math.cos(p),y0+r*dy*Math.sin(p))})}),
function(d){return line2(d)+'Z';});
plines(mapd,data,function(d){return line1(d)+'Z';});
}
</script>
</body>以上是关于html 进行重新取样。的主要内容，如果未能解决你的问题，请参考以下文章
动态网页爬取样例（WebCollector+selenium+phantomjs）