1 
Drawing voronoi diagram from a json  with d3.js and show the names in the center of each box where the black dots are shown.

http://bl.ocks.org/mbostock/4060366




<script>   
var width = 900,
    height = 500;


var vertices=[
              [200, 200],
              [760, 300],
              [230, 380],
              [660, 800],
              [660, 500],
              [660, 800],
              [160, 800],
              [460, 800],
              [860, 200],
              [660, 800],
              [760, 600],
              [260, 800],
              [660, 600]
            ];

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

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

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

svg.selectAll("circle")
    .data(vertices.slice(1))
  .enter().append("circle")
    .attr("transform", function(d) { return "translate(" + d + ")"; })
    .text(width);
    .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";
} 
</script>

以上是我的脚本。我正在使用顶点中的点生成图表。如何使用 json 生成这样的东西。但是 json 包含每个框的点和名称。名称应显示在每个盒子上。

4

0 回答 0