Как нарисовать несколько многоугольников из массива d3.js
У меня проблема с использованием d3.js.
На W1=a + "," + b + " " + "111,122" + " " + "122,112"); выдаёт ошибку.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
</style>
</head>
<body>
<script>
var W1="";
var a="";
var b="";
a="123";
b="123";
var canvas = d3.select("body")
.append("svg")
.attr("height", 600)
.attr("width", 600);
canvas.append("polygon")
.attr("points", "122,122 133,191 161,133,222,222,345,321")
.style("fill", "blue")
.style("stroke", "black")
.style("strokeWidth", "10px");
W1="55,55 100,100 300,555 777,888";
//W1=a + "," + b + " " + "111,122" + " " + "122,112");//Здесь ничего не работает
canvas.append("polygon")
.attr("points", W1)
.style("fill", "yellow")
.style("stroke", "black")
.style("strokeWidth", "10px");
</script>
<script>
/*
window.addEventListener("wheel", function(e) {
var dir = Math.sign(e.deltaY);
alert(dir);
});
*/
</script>
</body>
Ответы (1 шт):
Автор решения: Arthur Alunts
→ Ссылка
Спасибо - улет!!! работает у меня скобка лишняя была на этой как раз строке, а как теперь нарисовать несколько линий (draw polylines)? Вот мой успешный код где рисуются только многоугольники из массива и не из массива.
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v5.min.js"></script>
<style>
</style>
</head>
<body>
<script>
var W1="";
var canvas = d3.select("body")
.append("svg")
.attr("height", 1366)
.attr("width", 800);
canvas.append("polygon")
.attr("points", "122,122 133,191 161,133,222,222,345,321")
.style("fill", "blue")
.style("stroke", "black")
.style("strokeWidth", "10px");
var W=[6];
W[0]=(200).toString();
W[1]=(100).toString();
W[2]=(300).toString();
W[3]=(200).toString();
W[4]=(300).toString();
W[5]=(300).toString();
//W1="55,55 100,100 300,555 777,888"; Такой формат должен быть везде.
W1=(W[0]+","+W[1]+" "+W[2]+"," +W[3]+" "+W[4]+","+W[5]);//Здесь уже все работает
canvas.append("polygon")
.attr("points", W1)
.style("fill", "yellow")
.style("stroke", "black")
.style("strokeWidth", "10px");
var polygon2=canvas.append("polygon")
polygon2.attr("points", [123,15,24,33,111,115,122,123,366,222,444])//Можно и так
polygon2.style("fill", "lightgreen")
polygon2.style("stroke", "black")
polygon2.style("strokeWidth", "1px")
</script>
<script>
window.addEventListener("wheel", function(e) {
var dir = Math.sign(e.deltaY);
//alert(dir);
});
</script>
</body>