D3 二次方曲线与切线

数据生成

import json
dic = [{"x":i,"y":0.01*i*i} for i in range(-150,150,1)]
json.dump(dic,open("./test.json","w"))

d3展示

<html>
<style>
.axis path,
.axis line{fill: none;stroke: black;shape-rendering: crispEdges;
}
.axis text {font-family: sans-serif;font-size: 11px;
}
path {fill: transparent;stroke: green;
}
</style><body><svg width=300 height =300 ></svg><script src="d3.min.js" charset="utf-8"></script><script>svg =   d3.select("svg")    var xlinear = d3.scale.linear().domain([-150, 150]).range([0, 300]);var ylinear = d3.scale.linear().domain([0, 250]).range([250, 0]);var xaxis = d3.svg.axis().scale(xlinear)      //指定比例尺.orient("bottom")   //指定刻度的方向.ticks(10);          //指定刻度的数量var yaxis = d3.svg.axis().scale(ylinear).orient("left").ticks(5);svg.append("g").attr("class","axis").attr("transform","translate(0,250)")  //x轴上下平移不会对坐标系造成影响.call(xaxis);svg.append("g").attr("class","axis").attr("transform","translate(150,0)")  //y轴左右平移不会对坐标系造成影响.call(yaxis);d3.json("test.json", function(json){var circle = svg.selectAll("circle").data(json).enter().append('circle').attr('cx', (d)=>xlinear(d.x)).attr('cy', (d)=>ylinear(d.y)).attr("r",2).on("mouseover",function(){d3.select(this).attr("fill","yellow");x1 = d3.select(this).datum().x  //datum返回的标签相对应的数据y1 = d3.select(this).datum().ygradient=0.02*x1x2 = x1-100y2 = y1-100*gradientsvg.append("line").attr("x1",xlinear(x1)).attr("y1",ylinear(y1)).attr("x2",xlinear(x2)).attr("y2",ylinear(y2)).attr("stroke","black").attr("class","temp");console.log(d3.select(this).datum(),x1,y1,x2,y2);}).on("mouseout",function(){d3.select(this).attr("fill","dark");svg.select("line.temp").remove();  //使用class选择指定的元素})});</script></body>
</html>

D3 二次方曲线与切线相关推荐

【绘制】HTML5 Canvas二次方贝塞尔曲线，实现复选框对勾对号，实现圆角三角形，圆角矩形（图文，示例）
我的处女作<Canvas系列教程>在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作. 教程介绍.教程目录等能在README里查阅. 传送门:https: ...
Android仿苹果版QQ下拉刷新实现(二) ——贝塞尔曲线开发鼻涕下拉粘连效果
前言接着上一期 Android仿苹果版QQ下拉刷新实现(一) --打造简单平滑的通用下拉刷新控件的博客开始,同样,在开始前我们先来看一下目标效果: 下面上一下本章需要实现的效果图: 大家看到这个效 ...
《算法技术手册》一2.4.6 二次方的算法性能
2.4.6 二次方的算法性能现在考虑一个类似的问题:两个n位的整数相乘.例2-4展示了使用小学课堂上学过的算法实现的乘法运算,其中n位数字的表示方法与之前的加法一样. 例2-4:mult乘法的Jav ...
python使用matplotlib画图，绘制三维、二维曲线。设置字体大小以及坐标系间距等
话不多说,直接看代码和效果(不设置字体大小.逐个设置以及批量设置),其中,曲线的大小.类型以及颜色可以看我的另一篇博客. import matplotlib.pyplot as plt from mp ...
VTK：二次方用法实战
VTK:二次方用法实战程序输出程序完整源代码程序输出程序完整源代码 #include <vtkActor.h> #include <vtkDataSetMapper.h> ...
（专题四）01 二维曲线
利用plot()函数可以绘制出不同的二维曲线 lpot()函数用于绘制平面上的线性坐标曲线通常x,y为长度相等的向量例子相应位置上的x,y构成某一点的坐标,例如(2.5,1.5)构成第一点的坐标 ...
Filecoin将启动第一轮全球社区开发者二次方投票资助计划和线上Hackathon
据官方消息,Filecoin将启动第一轮全球社区开发者二次方投票资助计划线上Hackathon,目标是公益资助开发者的创新想法和早期优质项目,可以在Filecoin生态中进一步发展成技术更完善.产品更 ...
【数学】-1的根号二次方等于多少？
突然发现我这博客咋啥都开始写了呢... 上微积分课胡思乱想系列... 显然这个东西在数学上是没有定义的. 包括 −1 -1的 13 \frac13次方这样的东西,数学上的定义也挺模糊的不过我们可以想 ...
MATLAB plot函数绘制二维曲线
1.plot函数的基本调用在MATLAB中,在直角坐标系下绘制二维曲线一般使用plot函数. 基本调用格式: plot(x,y) x,y是长度一致的向量,例如: >> x=0:pi/10 ...

D3 二次方曲线与切线

D3 二次方曲线与切线相关推荐

最新文章

热门文章