D3.jsで完全グラフの描画

See the Pen Complete Graph by Takuya Matsuda (@matsutakk) on CodePen.

d3.select()で描画をする準備をして、

  let sampleSVG = d3.select("#viz")
                    .append("svg")
                    .attr("width", width)
                    .attr("height",height);    

.append("circle")で円を描画。
.style()で円の色等を決めて、
.attr()で位置を決定。

  sampleSVG.append("circle")
          .style("stroke", "white")
          .style("fill", "black")
          .attr("r", radius)
          .attr("cx", width/2)
          .attr("cy", height/2)

.append("line")で線を描画。
.style()で線の色等を決めて、
.attr()で引く位置を決定。

sampleSVG.append("line")
            .style("stroke", "white")
            .style("fill", "white")
            .attr("x1", array_x[i])
            .attr("y1", array_y[i])
            .attr("x2", array_x[j])
            .attr("y2", array_y[j])