d3笔记大全

其他 2019-01-05 08:41:00 阅读次数: 0

d3 官方文档 中文手册
https://github.com/d3/d3/wiki/API--中文手册

d3 样例教程
http://tutorials.jenkov.com/svg/rect-element.html

d3 react结合样例
http://www.iampua.com/pui/ant-admin.html#/simple-tag-cloud-chart

d3版本安装
sudo npm install [email protected] --save-dev

在线去底工具
http://www.aigei.com/bgremover/
ship 船

import React, { PureComponent } from 'react';
import * as d3 from 'd3';

export class D3UpgradePath extends React.Component {
  constructor(props) {
    super(props)
    this.initCanvas = this.initCanvas.bind(this)
  }
  initCanvas() {

    let width = 1000;
		let height = 800;
    let dataset = d3.range(8);		//返回[0,1,2,3,4,5]
    let svg = d3.select("#d3_test").append("svg")
								.attr("width",width)
                .attr("height",height);
    
    let widthNum=50
    let x0 = 100
    let y0 =  200
    let x1 = x0+600
    let y1 =  y0
    let linePath = d3.line()
    var lines = [[x0,y0],[x1,y1]]
    console.log(lines)

    var path1 = svg.append("path")
      .attr("d",linePath(lines))
      .attr("stroke","green")
      .attr("stroke-width","3px")
      .attr("fill","none")
      // .transition() //持续时间
      // .attr("stroke","black")


      let one = svg.append('image')
        .attr('x',-40)
        .attr('y',-50)
        .attr('width',50)
        .attr('height',50)
        .attr('xlink:href',require('./ship.jpeg'))
       one.append("animateMotion")
         .attr("path",linePath(lines))
         .attr("begin","0s")
         .attr("dur","10s")
         .attr("repeatCount","indefinite")
         .attr("rotate","auto")

      //   svg.append("text")
      //   // svg.selectAll("text")
      //     // .data(stepData)
      //     // .enter()
      //     // .append("text")
      //     .attr("x",x0+30)
      //     .attr("y",y0+30)
      //     .text("获取升级产品版本")
      //     .attr("color","#1890ff")
      //     .attr("style","stroke:#3f95f0;font-size: 15px;fill:#3f95f0;")
      //     .on("click",function(){
      //       console.log(11111111)
      //     })
      //     .on("mouseover",function(d,i){
      //        d3.select(this)
      //         // .transition()
      //         // .duration(3000)
      //         .attr("style","stroke:red;font-size: 15px;fill:red;")
      //         // .attr("fill","steelblue")
      //     })
      //     .on("mouseout",function(d,i){
      //         console.log(d3.select(this).attr("style","stroke:#3f95f0;font-size: 15px;fill:#3f95f0;"))
      //     })
      // let stepData = {
      //   1:{name:"获取升级产品版本"},
      //   2:{name:"现场摸底 帮助文档"},
      //   3:{name:"天眼分析"},
      // }




  var dataset1 = [ 250 , 210 , 170 , 130 , 90 ];
	
 
  //数据绑定  
	// svg.selectAll("text")
	// 	  .data(dataset1)
	// 	  .enter()
	// 	  .append("text")
	// 	  .attr("x",50)//每个矩形的起始x坐标
	// 	  .attr("y",function(d,i){//每个矩形的起始y坐标
	// 			return i * rectHeight+20;
  // 	  })
  




    // 1、获取升级产品版本
    // 2、现场摸底
    // 3、天眼分析 
          // 获取升级产品路径、
                  // 单产品多个升级路径 需要多次规划
          // 证书诊断、
                  // 重新签发证书 文档
          // 非标情况、
                  // 解决非标 变更修复
          // 现场诊断错误  
                  // 提工单
    // 4、升级规划、出包
          //配置失败 联系朱雀
    // 5、现场实施
    // 6、升级校验
    // 7、升级完成


          
let yNum = 230
var circles = [ 
  { cx: 150, cy:200, r:5, y:yNum, name:"获取升级产品版本" },
  { cx: 250, cy:200, r:5, y:yNum, name:"现场摸底" },
  { cx: 350, cy:200, r:5, y:yNum, name:"天眼分析" },
  { cx: 450, cy:200, r:5, y:yNum, name:"规划出包" },
  { cx: 550, cy:200, r:5, y:yNum, name:"现场实施" },
  { cx: 650, cy:200, r:5, y:yNum, name:"升级校验" }
];


// var drag = d3.behavior.drag()		//创建一个拖拽行为
// var drag = d3.drag()		//创建一个拖拽行为
//   .origin(function(d,i){		//设置起点坐标
//     return {x: d.cx ,y: d.cy } 	//起点坐标为被拖动物体的圆心坐标
//   })
//   .on("dragstart", function(d){	//dragstart的监听器	
//     console.log("拖拽开始");	
//   })
//   .on("dragend", function(d){		//dragend的监听器
//     console.log("拖拽结束");
//   })
//   .on("drag", function(d){		//drag的监听器
//     console.log(d3.event);
//     d3.select(this)		//选择当前被拖拽的元素
//       //将d3.event.x赋值给被绑定的数据，再将cx属性设置为该值
//       .attr("cx", d.cx = d3.event.x )
//       //将d3.event.y赋值给被绑定的数据，再将cy属性设置为该值
//       .attr("cy", d.cy = d3.event.y );
//   }); 

svg.selectAll("circle")
.data(circles)		//绑定数据
.enter()
.append("circle")
.attr("cx",function(d){ return d.cx; })
// .attr("cy",function(d,i){i%2 ?  d.cy : d.cy-50;})
.attr("cy",function(d,i){return d.cy})
.attr("r",function(d){ return d.r; })
.attr("fill","green")
// .call(drag);		//调用drag函数



svg.selectAll("text")
  .data(circles)		//绑定数据
  .enter()
  .append("text")
  // svg.selectAll("text")
  // .data(stepData)
  // .enter()
  // .append("text")
  .attr("x",function(d){console.log(d.cx);return d.cx})
  .attr("y",function(d,i){var one = 0; i%2 ?  one = y0+30 : one = y0+60;return one})
  .text(function(d){return d.name})
  .attr("color","#1890ff")
  .attr("style","stroke:#3f95f0;font-size: 15px;fill:#3f95f0;")
  .on("click",function(){
      d3.select(this).attr("style","stroke:#3f95f0;font-size: 15px;fill:#3f95f0;")
  })

// svg.selectAll("text")
// .data(circles)		//绑定数据
// .enter()
// .text("text")
// .text("你好")
// .attr("x",function(d){ return d.cx; })
// .attr("y",function(d){ return d.y; })
// .attr("fill","green")
// .attr("style","stroke:#3f95f0;font-size: 15px;fill:#3f95f0;")

    






      // fun end 
  }

  componentDidMount() {
    this.initCanvas()
  }
  componentDidUpdate() {
    this.initCanvas()
  }
 render() {
    // const { width, height, canvaswidth, canvasheight } = this.props
    return (
      // <div style={{ width: width, height: height, padding: 10 }}>
      <div>
        {/* <canvas id="d3_test" width={canvaswidth} height={canvasheight}></canvas> */}
        <div id="d3_test"></div>
      </div>
    )
  }
}

在这里插入图片描述

    var width = 500;
		var height = 300;
    var dataset = d3.range(8);		//返回[0,1,2,3,4,5]
    var svg = d3.select('#D3UpgradeGuide').append("svg")
								.attr("width",width)
                .attr("height",height);
	var dataset = [ 250 , 210 , 170 , 130 , 90 ];
	
	var rectHeight = 50;	//每个矩形所占的像素高度(包括空白)
 
	svg.selectAll("rect")
		  .data(dataset)
		  .enter()
		  .append("rect")
		  .attr("x",50)//每个矩形的起始x坐标
		  .attr("y",function(d,i){//每个矩形的起始y坐标
				return i * rectHeight+20;
		  })
		  .attr("width",function(d){//每个矩形的宽度 
		   		return d;
		  })
		  .attr("height",rectHeight-2)//每个矩形的高度
		  // .attr("fill","steelblue");//填充颜色
		  .attr("fill","#6666ff")//填充颜色 none
		  .attr("rx","10")//圆角
		  .attr("ry","10")//圆角
      .attr("style","stroke: #000000; stroke-width: 3")//边框色
      .attr("stroke-dasharray","10 5") //虚线
      .attr("fill-opacity","0.5") //透明度

	svg.selectAll("image")
		  .data(dataset)
		  .enter()
      .append("image")
      // .attr("xlink:href", "./beijing.png")
      // .attr("xlink:href", {beijingPng})
      .attr("xlink:href",require('./beijing.png'))
      .attr("x",200)
      .attr("y",200)
      .attr("width",298)
      .attr("height",300)
  console.log(svg)

在这里插入图片描述


    let width = 1000;
		let height = 800;
    let dataset = d3.range(8);		//返回[0,1,2,3,4,5]
    let svg = d3.select("#d3_test").append("svg")
								.attr("width",width)
                .attr("height",height);
    
    // 线段生成器
    // let linePath = d3.svg.line() //老版
    let widthNum=200
    let x0 = 0
    let y0 =  350
    let x1 = x0+100
    let y1 = y0
    let x2 = x1
    let y2 = y1-widthNum
    let x3 = x2+widthNum
    let y3 = y2
    let x4 = x3
    let y4 = y3+widthNum
    let x5 = x4+widthNum
    let y5 = y4
    let x6 = x5
    let y6 = y5-widthNum
    let x7 = x6+100
    let y7 = y6
    
    let linePath = d3.line()
    // var lines = [[x0,y0],[x0+100,y0],[x0+100,y0-200],[x0+400,y0-200],[x0+400,y0],[x0+500,y0]]
    var lines = [[x0,y0],[x1,y1],[x2,y2],[x3,y3],[x4,y4],[x5,y5],[x6,y6],[x7,y7]]
    var lines2 = [[x0,y0],[x0+100,y0],[x0+100,y0-200]]
    var path1 = svg.append("path")
      .attr("d",linePath(lines))
      .attr("stroke","green")
      // .attr("stroke","black")
      .attr("stroke-width","3px")
      .attr("fill","none")

    var path2 = svg.append("path")
      .attr("d",linePath(lines2))
      .attr("stroke","green")
      // .attr("stroke","black") .attr("stroke-width","3px")
      .attr("fill","none")

路径生成器
    function d3_svg_lineStep(points) {
      var i = 0, n = points.length, p = points[0], path = [ p[0], ",", p[1] ];
      while (++i < n) path.push("H", (p[0] + (p = points[i])[0]) / 2, "V", p[1]);
      if (n > 1) path.push("H", p[0]);
      return path.join("");
    }
 
 
    // 1、获取升级产品版本
    // 2、现场摸底
    // 3、天眼分析 
          // 获取升级产品路径、
                  // 单产品多个升级路径 需要多次规划
          // 证书诊断、
                  // 重新签发证书 文档
          // 非标情况、
                  // 解决非标 变更修复
          // 现场诊断错误  
                  // 提工单
    // 4、升级规划、出包
          //配置失败 联系朱雀
    // 5、现场实施
    // 6、升级校验
    // 7、升级完成

在这里插入图片描述

let width = 1000;
		let height = 800;
    let dataset = d3.range(8);		//返回[0,1,2,3,4,5]
    let svg = d3.select("#d3_test").append("svg")
								.attr("width",width)
                .attr("height",height);

    // 线段生成器
    // let linePath = d3.svg.line() //老版
    let x0 = 0
    let y0 = 0
    
    let linePath = d3.line()
    var lines = [[x0,y0],[x0+200,y0]]
    svg.append("path")
      .attr("d",linePath(lines))
      .attr("stroke","green")
      // .attr("stroke","black")
      .attr("stroke-width","3px")
      .attr("fill","none")

    var lines = [[x0,y0],[x0+100,y0],[x0+100,y0+100]]
    svg.append("path")
      .attr("d",linePath(lines))
      .attr("stroke","green")
      .attr("stroke-width","3px")
      .attr("fill","none")

在这里插入图片描述


    let width = 1000;
		let height = 800;
    let dataset = d3.range(8);		//返回[0,1,2,3,4,5]
    let svg = d3.select("#d3_test").append("svg")
								.attr("width",width)
                .attr("height",height);
    let react = svg.append("rect")
        .attr("x",10)
        .attr("y",80)
        .attr("width",30)
        .attr("height",15)
        .attr("style","stroke: #ff0000; fill: none;")
    let circle1 = svg.append("circle")
        .attr("cx",10)
        .attr("cy",0)
        .attr("r",5)
        .attr("fill","red")
    let circle2 = svg.append("circle")
        .attr("cx",10)
        .attr("cy",0)
        .attr("r",5)
        .attr("fill","red")
    let circle3 = svg.append("circle")
        .attr("cx",10)
        .attr("cy",0)
        .attr("r",5)
        .attr("fill","red")
 
 

    // <circle cx="30" cy="100" r="5" fill="green"/>

    let path = svg.append("path")
        //  .attr("d","M10,50 q60,50 100,0 q60,-50 100,0")
         .attr("d","M30,100 L270,300 M30,100 H270 M30,100 V300")
         .attr("style","stroke:#660000; fill:none;")
    circle1.append("animateMotion")
         .attr("path","M30,100 L270,300")
         .attr("begin","0s")
         .attr("dur","10s")
         .attr("repeatCount","indefinite")
    circle2.append("animateMotion")
         .attr("path","M30,100 H270")
         .attr("begin","0s")
         .attr("dur","10s")
         .attr("repeatCount","indefinite")
    circle3.append("animateMotion")
         .attr("path","M30,100 V300")
         .attr("begin","0s")
         .attr("dur","10s")
         .attr("repeatCount","indefinite")

在这里插入图片描述

d3.svg.line is not a function

新版d3 没有 d3.svg 需要改为d3.line()

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <rect x="10" y="10" height="50" width="50" style="stroke:#660000; stroke-width: 3; fill: #ee0000" transform="rotate(255.221 30 30)">
        <animateTransform attributeName="transform" begin="0s" dur="20s" type="rotate" from="0 30 30" to="360 30 30" repeatCount="indefinite"/>
    </rect>

    <rect x="111.79" y="10" rx="5" ry="5" height="50" width="50" style="stroke:#660000; stroke-width: 3; fill: #ee0000">
        <animate id="et" attributeName="x" begin="0s" dur="5s" from="70" to="120" repeatCount="indefinite"/>
    </rect>

    <rect x="200" y="10" rx="5" ry="5" height="50" width="50" style="stroke:#006600; stroke-width: 3; fill: #00ee00">
        <animateColor attributeName="fill" begin="0s" dur="5s" from="#003300" to="#00ff00" repeatCount="indefinite"/>
    </rect>

    <rect x="270" y="10" rx="5" ry="5" height="43.4318" width="50" style="stroke:#006600; stroke-width: 3; fill: #00ff00">
        <animate attributeName="height" begin="0s" dur="5s" from="10" to="50" repeatCount="indefinite"/>
    </rect>
    <rect x="360" y="10" rx="5" ry="43.4318" height="50" width="50" style="stroke:#006600; stroke-width: 3; fill: #00ff00">
        <animate attributeName="ry" begin="0s" dur="5s" from="10" to="50" repeatCount="indefinite"/>
    </rect>
    <path d="M10,100              l100,0              a1,1 0 0,1 100,50               a1,1 0 0,1 -100,-50 " style="stroke:#000000; stroke-width:2; fill:none;"/>
    <rect x="-25" y="-15" rx="5" ry="5" height="30" width="50" style="stroke:#006600; stroke-width: 3; fill: #00ff00">
        <animateMotion path="M10,100              l100,0              a1,1 0 0,1 100,50              a1,1 0 0,1 -100,-50" begin="0s" dur="5s" rotate="auto" repeatCount="indefinite"/>
    </rect>
    <a xlink:href="/svg/svg-animation.html" target="_top">
        <text x="20" y="200" style="stroke: #333333; font-family:Arial; font-size:14;">Animation</text>
    </a>


</svg>

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <line x1="0"  y1="10" x2="0"   y2="100" style="stroke:#006600;"/>
        <line x1="10" y1="10" x2="100" y2="100" style="stroke:#006600;"/>
        <line x1="20" y1="10" x2="100" y2="50"  style="stroke:#006600;"/>
        <line x1="30" y1="10" x2="110" y2="10"  style="stroke:#006600;"/>
</svg>

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="0,0  30,0  15,30"
        style="stroke:#006600;"/>
</svg>

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52"
        style="stroke:#006600; stroke-width: 2;
               fill: #33cc33;"/>
</svg>

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

    <polyline points="10,2  60,2  35,52  10,2"
        style="stroke:#006600; fill: #33cc33;"/>
</svg>

在这里插入图片描述

<svg xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">

  <polygon points="50,5   100,5  125,30  125,80 100,105
                   50,105  25,80  25, 30"
          style="stroke:#660000; fill:#cc3333; stroke-width: 3;"/>

</svg>

在这里插入图片描述

<svg width="500" height="100">
  <defs>
    <filter id="blurFilter3" y="-10" height="40" x="-10" width="150">
      <feOffset in="SourceAlpha" dx="3" dy="3" result="offset3" />
      <feGaussianBlur in="offset3" stdDeviation="3"  result="blur3"/>

      <feBlend  in="SourceGraphic" in2="blur3" x="-10" width="160"/>

    </filter>
  </defs>

  <ellipse cx="55" cy="60" rx="25" ry="15"
         style="stroke: none; fill: #0000ff;
                filter: url(#blurFilter3);" />

</svg>

在这里插入图片描述

  <defs>
      <filter id="blurFilter" y="-5" height="40"
          <feGaussianBlur in="SourceGraphic" stdDeviation="3" y="-"/>
      </filter>
  </defs>
    
  <ellipse cx="55" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; " />

  <ellipse cx="155" cy="60" rx="25" ry="15"
           style="stroke: none; fill: #0000ff; filter: url(#blurFilter);" />

在这里插入图片描述

<defs>
    <filter id="blurFilter5" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="2" />
    </filter>
    <filter id="blurFilter6" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="6" />
    </filter>
    <filter id="blurFilter7" x="-20" y="-20" width="200" height="200">
        <feGaussianBlur in="SourceGraphic" stdDeviation="12" />
    </filter>
</defs>

<rect x="20" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter5);" />
<rect x="150" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter6);" />
<rect x="300" y="24" width="90" height="90"
      style="stroke: none; fill: #00ff00; filter: url(#blurFilter7);" />

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/haogeoyes/article/details/85325485
D3
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022