d3

d3draws.js

16 Oct 2014

d3draws.js

d3.js でSVGを描画する機能を関数化してみました。


直線 描画関数 drawLine(svg,data[,xScale][,yScale])

// scale definition
var xScale01 = d3.scale.linear()
                     .domain([0,1])
                     .range([50,350]);
  
var yScale01 = d3.scale.linear()
                     .domain([0,1])
                     .range([150,50]);          

var lineData01 = [
{"x1":0,"y1":0.8,"x2":1,"y2":0.2},
{"x1":0,"y1":0.5,"x2":1,"y2":1,"stroke":"#f00","strokeWidth":5},
{"x1":0,"y1":0,"x2":1,"y2":0,"stroke":"#ff0","strokeWidth":15}
];    
drawLine(svg01,lineData01,xScale01,yScale01);

ベクトル 描画関数(角度と長さ) drawVectorA(svg,data[,xScale][,yScale])

var vecData02 = [
{"x1":0,"y1":0.8,"angles":-45,"length":1,"stroke":"#f0f","strokeWidth":4},
{"x1":1,"y1":0.5,"angles":210,"length":1,"stroke":"#ff0","strokeWidth":5}
];    

drawVectorA(svg02,vecData02,xScale01,yScale01);

ベクトル 描画関数(2点間) drawVectorB(svg,data[,xScale][,yScale])

var vecData03 = [
{"x1":0,"y1":0.8,"x2":1,"y2":0.8,"stroke":"#00f","strokeWidth":4},
{"x1":1,"y1":0.3,"x2":0.5,"y2":0.3,"stroke":"#0ff","strokeWidth":5}
];    

drawVectorB(svg03,vecData03,xScale01,yScale01);

ベクトル 描画関数(2点間 両方向矢印) drawVectorW(svg,data[,xScale][,yScale])

var vecData04 = [
{"x1":0,"y1":0.8,"x2":1,"y2":0.8,"stroke":"#ff0","strokeWidth":4},
{"x1":1,"y1":0.3,"x2":0.5,"y2":0.3,"stroke":"#fff","strokeWidth":2}
];    

drawVectorW(svg04,vecData04,xScale01,yScale01);

円 描画関数 drawCircle(svg,data[,xScale][,yScale])

circleData05 = [
{"cx":0.5,"cy":0.5,"r":95,"stroke":"#ff0"},
{"cx":0.5,"cy":0.5,"r":30,"stroke":"#ff0","fillColor":"#f00"},
{"cx":0.2,"cy":0.2,"r":15,"stroke":"#f00","fillColor":"#00f"},
{"cx":0.9,"cy":0.8,"r":60,"stroke":"#0f0","strokeWidth":5}
];

drawCircle(svg05,circleData05,xScale01,yScale01);

円弧 描画関数 drawArc(svg,data[,xScale][,yScale])

var arcData06 = [
{"startPos":90,"endPos":180,"innerRadius":120,"outerRadius":110,"stroke":"#fff"},
{"startPos":90,"endPos":0,"innerRadius":100,"outerRadius":100},
{"startPos":120,"endPos":0,"innerRadius":50,"outerRadius":70, "stroke":"#f00","strokeWidth":4,"xTranslate":0.5,"yTranslate":0},  
 {"startPos":90,"endPos":-30,"innerRadius":20,"outerRadius":100,"stroke":"#00f","strokeWidth":3,"fillColor":"#ff0","xTranslate":0.8,"yTranslate":0.2,xScale01,yScale01}
];  

drawArc(svg06,arcData06,xScale01,yScale01);

楕円 描画関数 drawEllipse(svg,data[,xScale][,yScale])

ellipseData07 = [
{"cx":0.4,"cy":0.7},
{"cx":0.8,"cy":0.3,"rx":50,"ry":80,"stroke":"#f00","fillColor":"#ff0"},
{"cx":0.2,"cy":1.5,"rx":40,"ry":60,"stroke":"#f00","fillColor":"#00f","rAngle":45} 
];

drawEllipse(svg07,ellipseData07,xScale01,yScale01);

長方形 描画関数 drawRect(svg,data[,xScale][,yScale])

rectData08 = [
{"x":0.3,"y":0.9,"width":200,"height":90,"stroke":"lime" },
{"x":0.6,"y":0.5,"width":50,"height":80,"stroke":"#f00","fillColor":"#ff0"},
{"x":0.2,"y":1.5,"width":40,"height":60,"stroke":"#f00","fillColor":"#00f", "rAngle":45} 
];

drawRect(svg08,rectData08,xScale01,yScale01);

直角三角形 描画関数 drawRTriangle(svg,data[,xScale][,yScale])

var triangleData09 = [
{"x1":50,"y1":30,"angle":15,"adjacent":200,"theta":30,"stroke":"#f00","strokeWidth":4},
 {"x1":350,"y1":130,"angle":190,"adjacent":150,"theta":25,"stroke":"#ff0","strokeWidth":4}
];

drawRTriangle(svg09,triangleData09,xScale01,yScale01);

多角形 描画関数 drawPolygon(svg,data[,xScale][,yScale])

var polyData10 = [
{"cx":100,"cy":80,"r":50,"sides":3,"start":90,"stroke":"#ff0"},
{"cx":100,"cy":80,"r":50,"sides":3,"start":-90,"stroke":"#ff0"},
{"cx":220,"cy":90,"r":70,"sides":8,"start":0,"stroke":"#0f0","fillColor":c10(5)},
{"cx":330,"cy":60,"r":60,"sides":5,"start":180,"stroke":"#00f","strokeWidth":5,"fillColor":c10(7)}
];

drawPolygon(svg10,polyData10);

文字 描画関数 drawText(svg,data[,xScale][,yScale])

var textData11 = [
{"x":100,"y":150,"text":"anchor start","anchor":"start","stroke":"#ff0","fontSize":18,"strokeWidth":2,"fontFamily":"cursive"},
{"x":100,"y":100,"text":"anchor middle","anchor":"middle","stroke":"#ff0",  "fontSize":18,"strokeWidth":2,"fontFamily":"fantasy"},
{"x":100,"y":50,"text":"anchor end","anchor":"end","stroke":"#ff0","fontSize":18,"strokeWidth":2,"fontFamily":"monospace"},
{"x":250,"y":200,"text":"rotate 30","rAngle":30,"stroke":"#ff0","fillColor":"#f00","fontSize":36,"strokeWidth":2,"fontFamily":"cursive"}
];
drawText(svg11,textData11,xScale02,yScale02);

Mathjax 描画関数 drawMathjax(svg,data[,xScale][,yScale])

var mathData12 = [
{"x":100,"y":200,"text":"$$ax^2+bx+c=0$$","fontSize":16},
{"x":100,"y":150,"text":"$$x=\\frac{-b\\pm\\sqrt{ b^2-4ac }}{2a}$$","fontSize":16}
];
    
drawMathjax(svg12,mathData12,xScale02,yScale02);

軸 描画関数 drawAxes(svg,data)

var xScale03 = d3.scale.linear()
                 .domain([-50,300])
                 .range([50,350]);
var yScale03 = d3.scale.linear()
                 .domain([-100,300])
                 .range([350,50]);          
axesData13 = { 
"xAxis":true,
"yAxis":true,
"xTickValues":[-50,0,100,200,300],
"yTickValues":[-100.0,150.5,300.0],
"xTickPadding":5,
"yTickPadding":2,
"xOrient":["bottom"],
"yOrient":["left"],
"xFormat":"f",
"yFormat":".1f",
"stroke":"#ff0",
"strokeWidth":1,
"fillColor":"none",
"xScale":xScale03,
"yScale":yScale03
};
drawAxes(svg13,axesData13);

グリッド 描画関数 drawGrid(svg,data)

gridData14 = 
{
"xGrid":true,
"yGrid":true,
"xStep":100,
"yStep":50,
"stroke":"#0f0",
"strokeWidth":1,
"opacity":0.3,
"xScale":xScale03,
"yScale":yScale03
};
drawAxes(svg14,axesData13);   
drawGrid(svg14,gridData14);   

Path 描画関数 drawPath(svg,data,stroke,strokeWidth,fillColor[,xScale][,yScale])

pathData15 = [
  {"x":-30,"y":150},
  {"x":80,"y":50},
  {"x":150,"y":-80},
  {"x":200,"y":200},
  {"x":280,"y":250}
  ]; 
pathAttrs15 = {"stroke":"#f00","strokeWidth":3,"fillColor":"none"}; 
drawAxes(svg15,axesData13);   
drawGrid(svg15,gridData14);
drawPath(svg15,pathData15,pathAttrs15,xScale03,yScale03);
drawPath(svg15,pathData15,{});