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

我的数据集样本，将从数据库中提取

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");
4

1 回答 1

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/

于 2012-09-30T04:45:12.830 回答