Как добавить SVG на страницу с помощью D3

-1

Итак, у меня есть .js-файл, содержащий простой SVG, который создает квадрат. Код ниже:Как добавить SVG на страницу с помощью D3

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. Используйте прямоугольник (как вы пробовали)

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

Как добавить SVG на страницу с помощью D3

ответ

Смежные вопросы