Как нарисовать несколько многоугольников из массива 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>

→ Ссылка