D3 JS 클릭하여 다각형 생성하기

질문:

다음 코드를 고려

var width = 960,
    height = 500;

var vertices = d3.range(100).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); });


var path = svg.append("g").selectAll("path");

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 1.5);

redraw();

function redraw() {
  path = path
      .data(voronoi(vertices), polygon);

  path.exit().remove();

  path.enter().append("path")
      .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
      .attr("d", polygon);

  path.order();
}

function polygon(d) {
  return "M" + d.join("L") + "Z";
}

어떻게 누르는 동시에 새로운 다각형을 추가하고 중심점을 동시에 그립니까?너는 좋은 시작을 할 수 있다.

답안

의 mousemove탐지기 외에 svg탐지기가 하나 더 필요하다.이 기능을 사용하면 사용자가 클릭할 때마다 새 정점을 추가할 수 있습니다.이를 위해, 나는 리셋을 구분하기 위해 리셋 함수에 변수를 추가했다.너는 아마도 더 깨끗한 방법을 찾아서 이 일을 할 수 있을 것이다. 그러나 이것이 도움이 되기를 바란다.

var width = 960,
    height = 500;

var vertices = d3.range(100).map(function(d) {
  return [Math.random() * width, Math.random() * height];
});

var voronoi = d3.geom.voronoi()
    .clipExtent([[0, 0], [width, height]]);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .on("mousemove", function() { vertices[0] = d3.mouse(this); redraw(); })
    .on('click', function() { 
    	vertices.push(d3.mouse(this)); 
      redraw(true); 
     });


var path = svg.append("g").selectAll("path");

var circle = svg.selectAll("circle");

redraw();

function redraw(fromClick) {
  var data = voronoi(vertices);
  path = path
      .data(data, polygon);
  path.exit().remove();
  path.enter().append("path")
      .attr("class", function(d, i) { return "q" + (i % 9) + "-9"; })
      .attr("d", polygon);
  path.order();
  
  circle = circle.data(vertices)
  circle.attr("transform", function(d) { return "translate(" + d + ")"; })
  circle.enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .attr("r", 1.5)
    .attr('fill', fromClick ? 'white' : '')
  
  circle.exit().remove();
  
}
function polygon(d) {
  return d ? "M" + d.join("L") + "Z" : null;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>