Question

如果我使用以下代码，我可以将我的圈子显示在图表上：

var circles =

                  groups.selectAll("circle")
                   .data(data)
                   .enter().append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_Value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); })

如果我改为使用以下代码，我可以将标签显示在圆圈的位置：

var circles =

                  groups.selectAll("circle")
                   .data(data)
                   .enter().append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");

但我无法让圆圈和标签一起出现。

我试过了：

groups.selectAll("circle")
                   .data(data)
                   .enter().append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); })
                   .enter().append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");

但这不起作用。

Answer 1

抱歉，可能有点生疏，但我认为这是正确的语法。为了将来参考，它可能有助于制作jsfidde / plnkr等。

var circles = groups.selectAll("circle")
                   .data(data)
                   .enter().append(g);

circles.append("circle")
                   .attr("class", "circles")
                    .attr({
                         cx: function(d) { return x(+d.x_axis_value); },
                         cy: function(d) { return y(+d.y_axis_value); },
                         r: function(d) { return d.priority * 10; },
                         id: function(d) { return d.project; }
                         })
                   .style("fill", function(d) { return color(d.status); });

circles.append("text")
                   .attr("class", "text")
                   .attr("y", function (d) { return y(d.y_axis_value); })
                   .attr("x", function (d) { return x(d.x_axis_value); })
                   .text(function(d) { return d.project; })
                   .attr("fill", "white");

获取圆圈和标签以在D3图表上一起显示

1 个答案: