我有一組字符串數據，我想情節需要的分區與字符串整齊地繪製圓

Question

var svgcanvas = d3.select("body").append("svg:svg") 
.attr("width", 725) 
.attr("height", 500); 

我的數據集的樣本將來自DB

var jsoncirclehigh =[ 

         { 
          "blah":"Javascript", 
          "blah":"", 
          "blah":"", 

         }, 
          { 

           "Technology": "D3", 
           "TechField":"", 
           "Devphase":"", 

          }, 
        ]; 

形狀被拉到附近我忘了加

svgcanvas.append("svg:path") 
    .attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0") 
    .attr("transform", "translate(220,400) scale(1, -1)") 
    .style("stroke-width", 2) 
    .style("stroke", "steelblue") 
    .style("fill", "yellow"); 

圈，我創建了我想與數據相匹配

svgcanvas.append("circle") 
    .attr("r", 2.5) 
    .attr("cx", 200) 
    .attr("cy", 250) 
    .style("stroke", "steelblue") 
    .style("fill", "blue") 
    .on("mouseover", function(){d3.select(this).style("fill", "aliceblue");}) 
    .on("mouseout", function() {d3.select(this).style("fill", "blue");}) 
    .text(function(d) {return d;}); 

試圖與圓的文本匹配，但沒有奏效

      svgcanvas.selectAll("text") 
            .data(jsoncirclehigh) 
            .enter() 
            .append("text") 
            .attr("font-family", "sans-serif") 
            .attr("font-size", "11px") 
            .attr("fill", "red"); 

Answer 1

理想的情況下你的圈子和jsoncirclehigh將是相同的數據結構。 d3.js的要點是使用數據（如jsoncirclehigh）來驅動創建SVG元素。嘗試更多的東西一樣：

var svgcanvas = d3.select("body").append("svg:svg") 
    .attr("width", 500) 
    .attr("height", 500); 

var jsoncirclehigh = [ 
         {cx:100, cy: 100, r: 2.5, 
         label:"technology"}, 
         {cx:200, cy: 200, r: 2.5, 
         label:"rocks"} 
        ]; 

svgcanvas.selectAll("circle") 
     .data(jsoncirclehigh) 
     .enter().append("circle") 
      .attr("r", function (d) { return d.r; }) 
      .attr("cx", function (d) { return d.cx; }) 
      .attr("cy", function (d) { return d.cy; }) 
      .style("stroke", "steelblue") 
      .style("fill", "blue"); 

svgcanvas.selectAll("text") 
     .data(jsoncirclehigh) 
     .enter().append("svg:text") 
     .text(function(d) { return d.label; }) 
     .attr("x", function (d) { return d.cx + 10; }) 
     .attr("y", function (d) { return d.cy + 10; }); 

http://jsfiddle.net/2jw9k/4/