Aspire to be a full-stack developer.
Published
Edited
Mar 9, 2021
1 fork
md`# Node Encoding`
{
var width = 800; //画布的宽度
var height = 800; //画布的高度
var rectSet = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];//节点集
var lineSet = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17];//边集
var positionX = [200, 300, 100, 400, 100, 400, 200, 300, 400, 100, 200, 300, 400];//节点横坐标
var positionY = [120, 100, 200, 200, 320, 320, 400, 420, 400, 500, 500, 500, 500];//节点纵坐标
var rectHeight = [35, 70, 70, 70, 35, 35, 70, 35, 70, 70, 70, 70, 70]; //节点高度
var rectWidth = 70;//节点宽度
var dataColor = ["#ffffff", "#f9f39c", "#f8cacc", "#f9f39c", "#ffffff", "#ffffff", "#f8cacc", "#ffffff", "#f9f39c",
"#d2ecf2", "#d2ecf2", "#f9f39c", "#f9f39c"
]//节点颜色
var startPointX = [270, 220, 170, 370, 400, 135, 135, 435, 150, 200, 270, 300, 420, 435, 400, 400, 400, 435];//边起点X坐标值
var startPointY = [135, 155, 200, 170, 200, 270, 320, 270, 355, 400, 435, 435, 355, 355, 450, 460, 470, 435];//边起点Y坐标值
var endPointX = [300, 170, 220, 400, 370, 135, 135, 435, 200, 150, 300, 270, 355, 435, 170, 270, 370, 435];//边终点X坐标值
var endPointY = [135, 200, 155, 200, 170, 320, 270, 320, 400, 355, 435, 435, 420, 400, 525, 520, 500, 500];//边终点Y坐标值
var dashSize = ["0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "0", "5", "5", "5", "5"];//边的“虚线”点间隔值，用以控制边是实线或者虚线
var rectText = ["test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8", "test9", "test10", "test11",
"test12", "test13"
]//节点文字描述
// var svg = d3.select("body") //选择文档中的body元素
// .append("svg") //添加一个svg元素
var svg = d3.create('svg')
.attr("width", width) //设定宽度
.attr("height", height); //设定高度
//画箭头
var defs = svg.append("defs");
var arrowMarker = defs.append("marker")
.attr("id", "arrow")
.attr("markerUnits", "strokeWidth")
.attr("markerWidth", "6")
.attr("markerHeight", "6")
.attr("viewBox", "0 0 12 12")
.attr("refX", "9")
.attr("refY", "6")
.attr("orient", "auto");
var arrow_path = "M2,2 L10,6 L2,10 L6,6 L2,2";
arrowMarker.append("path")
.attr("d", arrow_path)
.attr("fill", "#000");
svg.selectAll("line")
.data(lineSet)
.enter()
.append("line")
.attr("x1", function(d, i) {
return startPointX[i];
}) //每个矩形的起始x坐标
.attr("y1", function(d, i) {
return startPointY[i];
})
.attr("x2", function(d, i) {
return endPointX[i];
})
.attr("y2", function(d, i) {
return endPointY[i];
})
.attr('stroke', '#000000')
.style("stroke-dasharray", function(d, i) {
return "5," + dashSize[i];
}) //dashed array for line
.attr('stroke-width', '3')
.attr("marker-end", "url(#arrow)");
//画节点
let nodes = svg.selectAll("g")
.data(rectSet)
.enter()
.append("rect")
.attr("x", function(d, i) {
return positionX[i];
}) //每个矩形的起始x坐标
.attr("y", function(d, i) { //每个矩形的起始y坐标
return positionY[i];
})
.attr("height", function(d, i) { //每个矩形的高度
return rectHeight[i];
})
.attr("width", rectWidth) //每个矩形的宽度
.attr("fill", function(d, i) { //每个矩形的起始y坐标
return dataColor[i];
})
.attr('stroke', '#000000')
.attr('stroke-width', '3')
//节点上的文字描述
nodes = svg.selectAll("g")
.data(rectSet)
.enter()
.append('text')
.attr("x", function(d, i) {
return positionX[i] + 15;
})
.attr("y", function(d, i) {
return positionY[i] + 20;
})
.text(function(d, i) {
return rectText[i];
})
.attr("fill", "#000000")
//画边
//指定比例尺
const xScale = d3.scaleLinear()
.domain([0, 9])
.range([0, 50]);
const yScale = d3.scaleLinear()
.domain([0, 1])
.range([30, 0]);
const line = d3.line()
.x((d) => xScale(d.x))
.y((d) => yScale(d.y));
nodes = svg.selectAll("g")
.data(rectSet)
.enter()
.append("g")
.attr('transform', function(d, i) {
var newPosX = positionX[i] + 10;
var newPosY = positionY[i] + 30;
return "translate(" + newPosX + "," + newPosY + ")"
})
.append("path")
.datum(function(d,i){
return d3.range(10).map((d) => ({x: d, y: d3.randomUniform(1)()}));
})
.attr("fill", function(d, i) {
if (i == 0 || i == 4 || i == 5 || i == 7) return "none";
else return "rgba(255,0,0,0.2)";
})
.attr("stroke", function(d, i) {
if (i == 0 || i == 4 || i == 5 || i == 7) return "none";
else return "red";
})
.attr("stroke-width", 1.5)
.attr("stroke-linejoin", "round")
.attr("stroke-linecap", "round")
.attr("d", line);
return svg.node()
}
d3 = require("d3@6")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
