在d3中向圆形添加文字

Question

I cant seem to find a way to add the strings from the data to my circles.. the code that refers to the text isn't working, and isn't making errors too.. any ideas? thank you very much :)

        //Create circles            
        var circle=svg.append("g")
            .attr("class", "circles")
            .selectAll("circle")
            .data(data)
            .enter()
            .append("circle")
            .attr("cx", w / 2)
            .attr("cy", h / 2)
            .attr("r", 4)
            .transition()
            .duration(2000)
            .attr("cx", function(d) {
                return xScale(d.accountancy);
           })
           .attr("cy", function(d) {
               return yScale(d.income);
           })
           .transition()
            .duration(2000)
           .attr("r", function(d) {
               return d.income/radiusOffset;
           })
           .attr("fill",function(d){
                if(d.accountancy<0){
                    return "#DD2626";
                }
                return "#4CA64C";
            });

           //create text
        var text=svg.append("g").selectAll("text")
                    .data(data)
                    .enter()
                    .append("text")
                    .attr("x", function(d) {
                                    return xScale(d.accountancy);
                                })
                    .attr("y",function(d) {
                                    return xScale(d.income);
                                })
                    .attr("font-size","15px")

           //Create X axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + (h - padding + 5) + ")")
            .call(xAxis);

        //Create Y axis
        svg.append("g")
            .attr("class", "y axis")
            .attr("transform", "translate(" + (padding - 5) + ",0)")
            .call(yAxis);

    </script>
</body>

Answer 1

You haven't specified any text to display in your text variable. All you need to do is give the text some values using text , as in;

.text(function (d) { return d.sometext; });

You can see an example working in this fiddle

Answer 2

You need to create a <g> element per circle, which will include both your <circle> and your <text> elements. For example:

    //Creating the groups
   var circles = svg.selectAll("g.circles");

   //Adding circles to the groups
    circles = circles.data(data)
            .enter()
            .append("g")
            .classed("circles", true);

    circles.append("svg:circle")

    //Styling the circles.
    circles.selectAll("circle")
        .attr("cx", w / 2)
        .attr("cy", h / 2)
        .attr("r", 4);

    //Adding text labels to the groups
    circles.append("text");

   //Styling text
    circles.selectAll("text")
            .text("Put your text stuff here")
            .attr("font-family",  "Courier")
            .attr("fill", "black")
            .style("opacity", "0.8")
            .attr("font-size", "0.8em")
            .attr("text-anchor",  "middle");

There's probably more elegant/concise ways to do this, but this has worked for me in the past. See also this example by Mike Bostock .

Answer 3

.attr("y",function(d) { return xScale(d.income);

the problem was here.. i used the xScale for the y axe as well ... changed to:

.attr("y",function(d) { return yScale(d.income);