Question

这是我的代码。我想在圆圈中添加一个文字，但是这个文字没有添加这个圆圈，它会添加我绘制的下一个圆圈。

group1 = vis.append("svg:g")
    .attr("stroke", "white")
    .attr("stroke-width", 3)
    .attr("fill", "orange");
    // These attributes affect all
    // graphical elements in group1.


// Add a circle to the group1
circle1 = group1.append("svg:circle")
    .attr("class", "nucleus")
    .attr("cx", 250)
    .attr("cy", 250)
    .attr("r", 37.5);


// Add text to group1
text1 = group1.append("svg:text")
    .text("Group 1")    
    .attr("x", 250)
    .attr("y", 255)
    .style("stroke", "orange")
    .style("stroke-width", 1)
    .style("font-size", "150%")
    .style("fill", "orange");

文本在这里添加第一个圆圈。

var electron_nodes = vis.selectAll('circle.electron')
    .data(electrons); 

//chain 2: enter
electron_nodes.enter().append("circle")
    .attr("class", "electron")
    //.attr("id", function(d) { return "id_" +     parseInt(d.x)+"_"+parseInt(d.y)+"_"+Math.floor((Math.random()*100)+1) })
    .attr("id",function(d) { return d.key; })
    .attr("fill", function(d) { if(d.type){return true;}else{return false;} })
    .on("mouseover", mouseover)
    .on("mouseout", mouseout)
    .on("contextmenu",contextmenu)
    .attr("r", 10); 

//chain 3: exit
electron_nodes.exit().remove(); 

//chain 4: update
electron_nodes.attr("cx", function(d) { return d.x; })
    .attr("cy", function(d) { return d.y; });



//chain 1: select
var text = vis.selectAll("text")
    .data(electrons)

//chain 2: enter
text.enter().append("text")
    //.attr("id", function(d) { return "id_" + parseInt(d.x)+"_"+parseInt(d.y)+"_"+"text" })
    .attr("id",function(d) { return d.key+"_text"; })
    .attr("font-family", "sans-serif")
    .attr("font-size", "12px")
    .attr("fill", "red");


//chain 3: exit
text.exit().remove(); 


//chain 4: update
text.attr("x", function(d) { return d.x; })
    .attr("y", function(d) { return d.y; })
    .text( function (d) { return d.name })

请指导我在哪里犯错误

Answer 1

应该是

//chain 1: select
var text = vis.selectAll("text.someclass")
               .data(electrons)

仅selectaAll text覆盖第一个文字

d3.js添加问题的圆圈文本

1 个答案: