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 d3@3.5.17 --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);" />