D3を使用してページにSVGを追加する方法

-1

したがって、正方形を作成する単純なSVGを含む.jsファイルがあります。コード：D3を使用してページにSVGを追加する方法

function load(){ 
var xmlns = "http://www.w3.org/2000/svg"; 

var foo = document.getElementById("printSquare"); 
var bar = document.createElementNS(xmlns, "svg"); 
var svgSquare = d3.select("div.output svg") 
s.appendChild(svgSquare) 
foo.appendChild(bar); 

var square = svg.select("rect") 
square.attr("width", 200) 
square.attr("height", 200) 
} 
window.onload = load;

この正方形をHTMLファイルに追加して、ブラウザで開いて正方形を表示できます。今のように私のHTMLコード：

<html> 
<head> 
    <script src="https://d3js.org/d3.v4.min.js"></script> 
    <script type="text/javascript" src="drawSquare.js"></script> 
</head> 
<body>  
    <div id="printSquare"></div> 
</body> 
</html>

出典

2017-02-18 tralifa

チェックアウトこのフィドル - あなただけの正方形と他には何を作成したい場合はhttps://jsfiddle.net/s8capLx3/2/

、それについて移動する2つの方法があります...

利用D3シンボルまたは2. RECT（あなたがしようとしたような）

var data = [0]; 
var svg = d3.select('#printSquare').append('svg').attr('width',400).attr('height',200); 

//symbols approach 
svg.selectAll('.symbol') 
.data(data) 
.enter() 
.append('path') 
.attr('transform',function(d,i) { return 'translate('+(i*20+20)+','+30+')';}) 
.attr('d', d3.symbol().type(function(d,i) { return d 3.symbols[3];}).size("200")); 

//rect approach 
svg.append("rect") 
.attr("x", "200") 
.attr("y", "10") 
.attr("width", "75") 
.attr("height", "75") 
.attr("fill", "black");

出典

2017-02-18 05:24:26 sparta93

D3を使用してページにSVGを追加する方法

答えて

関連する問題