D3 二次方曲线与切线

最新推荐文章于 2019-06-13 00:14:00 发布

Claroja

最新推荐文章于 2019-06-13 00:14:00 发布

阅读量780

点赞数

分类专栏： D3 文章标签：可视化

本文链接：https://blog.csdn.net/claroja/article/details/79885361

版权

D3 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

数据生成

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().y
                                gradient=0.02*x1
                                x2 = x1-100
                                y2 = y1-100*gradient
                                svg.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>

Claroja

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
D3 二次方曲线与切线

数据生成import jsondic = [{"x":i,"y":0.01*i*i} for i in range(-150,150,1)]json.dump(dic,open("./test.json","w"))d3展示&lt;html&gt;&lt;style&gt;.axis path,.axis line{ fill: none; stroke: b
复制链接

扫一扫