Question

我似乎无法找到一种方法将数据中的字符串添加到我的圈子中。引用文本的代码不起作用，也没有出错。有任何想法吗？非常感谢你:)）

        //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

您尚未指定要在文本变量中显示的任何文字。您需要做的就是使用text为文本提供一些值，如;

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

您可以在此fiddle

中查看示例

Answer 2

您需要为每个圈子创建一个<g>元素，其中包含您的<circle>和<text>元素。例如：

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

这可能是更优雅/简洁的方法，但这在过去对我有用。另请参阅此example by Mike Bostock。

Answer 3

.attr（＆＃34; y＆＃34;，function（d）{ return xScale（d.income）;

问题出在这里..我也使用xScale作为y轴... 改为：

.attr（＆＃34; y＆＃34;，function（d）{ 返回yScale（d.income）;

在d3中向圆圈添加文本

3 个答案: