D3JS：帮助使用D3js在圆内创建SVG文本元素

Question

我创建了一个代码，当将鼠标悬停在SVG文本元素列表上时，会绘制一个不同的SVG图像（国家/地区）。 我还创建了一个SVG元素，其中必须显示对象数组内的值。 该值取决于所徘徊的国家。

我创建了一个临时的<p>元素，将其悬停在国家列表的任何文本元素上时会显示所需的值，但是我真正需要的是在显示值的圆圈中间创建一个SVG文本元素（当前显示在可怕的<p>元素）

国家的svg代码非常大，因此我只用一个简单的svg图标代替了它们，以便提出这个问题。

我正在使用D3js v5和jquery v3.3.1。

我将不胜感激任何帮助。 谢谢。

  var myGroup = '<g class="iconXY"><path class="st0" d="M15.6,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C13.2,9.7,14.2,10.9,15.6,10.9L15.6,10.9z"/><path class="st0" d="M18.6,11.6h-1.2l-1.8,5.5l-1.8-5.5h-1.2c-1.3,0-2.4,1.2-2.4,2.7v13h2.4l1.2,16.4h3.6l1.2-16.4H21v-13C21,12.8,19.9,11.6,18.6,11.6L18.6,11.6z"/><path class="st0" d="M31.9,10.9c1.3,0,2.4-1.2,2.4-2.7c0-1.5-1.1-2.7-2.4-2.7c-1.3,0-2.4,1.2-2.4,2.7C29.5,9.7,30.6,10.9,31.9,10.9L31.9,10.9z"/><path class="st0" d="M39.8,25.2l-3.6-11.6c0,0-0.6-2-2.4-2h-3.6c-1.8,0-2.4,2-2.4,2l-3.6,11.6l1.2,0.7l4.2-9.5l-3.6,14.3h3.6l1.2,13h2.4l1.2-13H38l-3.6-14.3l4.2,9.5L39.8,25.2L39.8,25.2z"/></g>'; var mapData = [ {"imgSrc":"australia_svg", "code":"AU" , "name":"Australia", "value":2, "color":"#BC204B"}, {"imgSrc":"belgium_svg", "code":"BE" , "name":"Belgium", "value":1, "color":"#BC204B"}, {"imgSrc":"other_americas_svg", "code":"BR" , "name":"Other Americas", "value":1, "color":"#BC204B"}, {"imgSrc":"canada_svg", "code":"CA" , "name":"Canada", "value":4, "color":"#BC204B"}, {"imgSrc":"finland_svg", "code":"FI" , "name":"Finland", "value":2, "color":"#BC204B"}, {"imgSrc":"france_svg", "code":"FR" , "name":"France", "value":1, "color":"#BC204B"}, {"imgSrc":"germany_svg", "code":"DE" , "name":"Germany", "value":14, "color":"#BC204B"}, {"imgSrc":"india_svg", "code":"IN" , "name":"India", "value":1, "color":"#BC204B"}, {"imgSrc":"ireland_svg", "code":"IE" , "name":"Ireland", "value":1, "color":"#BC204B"}, {"imgSrc":"japan_svg", "code":"JP" , "name":"Japan", "value":2, "color":"#BC204B"}, {"imgSrc":"korea_svg", "code":"KP" , "name":"Korea, Dem. Rep.", "value":1, "color":"#BC204B"}, {"imgSrc":"luxembourg_svg", "code":"LU" , "name":"Luxembourg", "value":1, "color":"#BC204B"}, {"imgSrc":"netherlands_svg", "code":"NL" , "name":"Netherlands", "value":2, "color":"#BC204B"}, {"imgSrc":"norway_svg","code":"NZ" , "name":"New Zealand", "value":2, "color":"#BC204B"}, {"imgSrc":"new_zealand_svg", "code":"NO" , "name":"Norway", "value":2, "color":"#BC204B"}, {"imgSrc":"paraguay_svg", "code":"PY" , "name":"Paraguay", "value":1, "color":"#BC204B"}, {"imgSrc":"saudi_arabia_svg", "code":"SA" , "name":"Saudi Arabia", "value":2, "color":"#BC204B"}, {"imgSrc":"singapore_svg", "code":"SG" , "name":"Singapore", "value":1, "color":"#BC204B"}, {"imgSrc":"spain_svg", "code":"ES" , "name":"Spain", "value":1, "color":"#BC204B"}, {"imgSrc":"switzerland_svg", "code":"CH" , "name":"Switzerland", "value":6, "color":"#BC204B"}, {"imgSrc":"uk_svg", "code":"GB" , "name":"United Kingdom", "value":4, "color":"#BC204B"}, {"imgSrc":"us_svg", "code":"US" , "name":"United States", "value":4, "color":"#BC204B"} ]; var width = 512 var height = 600 var radius = 5 var countryWidth = 250 var countryHeight = 250 var svg = d3.select("body") .append("svg") .attr("width",width) .attr("height",height) .style("background","#dedede") .append("g") .attr("transform","translate(50,500) rotate(-90)") var svg2 = d3.select("body") .append("svg") .attr("width",countryWidth*1.5) .attr("height",countryHeight*1.5) .style("background","none") .append("g") .attr("class","countryHolder") .attr("transform","translate(" + countryWidth/3.5 + "," + countryHeight/5 + ") scale(1.5)") .html(myGroup); var svg3 = d3.select("body") .append("svg") .attr("width",countryWidth/2) .attr("height",countryHeight/2) .style("background","none") .attr("class","svg3") .attr("transform","translate(" + (-countryWidth*1.2) + "," + (-countryHeight*1.5) + ")") var circlee = d3.select(".svg3") .append("circle") .attr("cy","10") .attr("cx","10") .attr("r","30") .attr("fill","#bc204b") .attr("class","circle") .attr("transform","translate(" + countryWidth/4 + "," + countryHeight/4 + ") scale(1.5)") var string = d3.select(".circle") .append("g") .attr("class","statsHolder") var g = svg.selectAll("g") .data(mapData) .enter() .append("g") .attr("transform", function (d, i) { return "translate(" + i * 20 + "," + 0+ ")"; }) var circles = g.append("circle") .attr("cx",0) .attr("cy",0) .attr("r",radius) .attr("fill","#00A3A1") .attr("class","circleGroupMember pointer") .on("mouseover", handleMouseOver) .on("mouseout", handleMouseOut); var labels = g.append("text") .attr("class","countriesText pointer") .style("fill", "black") .attr("x", 0) .attr("y", 0) .attr("dy", ".35em") .attr("text-anchor", "start") .text(function(d,i){ return mapData[i].name; }) .attr("transform", "translate(0,20) scale(1) rotate(90)") .on("mouseover", MouseOverText) .on("mouseout", MouseOutText); var i var circleGroupMember = $(".circleGroupMember"); for(i = 0; i<circleGroupMember.length; i++){ circleGroupMember[i].setAttribute("id",mapData[i].imgSrc) } /*-------------------------Mouse over text function-----------------------*/ function MouseOverText(){ d3.select(this) .transition() .ease(d3.easeLinear) .duration(8800) .style("font-weight","bold") .attr("fill", "#00338D") for(var i = 0; i < mapData.length; i++){ if(mapData[i].name == $(this).html()){ $(".statsP").html(mapData[i].value + "%" ).css({"font-size": "30px"}) } } if($(this).html() == "United States"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "India"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Switzerland"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "United Kingdom"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Canada"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Japan"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Australia"){ $(".countryHolder").html(myGroup) } else if($(this).html () == "Saudi Arabia"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Belgium"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Finland"){ $(".countryHolder").html(myGroup) } else if($(this).html() =="France"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Germany"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Ireland"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Korea, Dem. Rep."){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Luxembourg"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Netherlands"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "New Zealand"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Norway"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Paraguay"){ $(".countryHolder").html(myGroup) } else if($(this).html() == "Spain"){ $(".countryHolder").html(myGroup) } } /*-------------------------Mouse out text function-----------------------*/ function MouseOutText(){ d3.select(this) .transition() .ease(d3.easeLinear) .duration(8800) .style("font-weight","normal") .attr("fill", "#000") } /*-------------------------Mouse Over Dot function-----------------------*/ function handleMouseOver(d, i) { d3.select(this) .transition() .ease(d3.easeLinear) .duration(8800) .attr("fill", "#C6007E") .duration(150) .attr("r", function(){ return radius * 2 }) $(this).next().css({fill:"#00338D", fontWeight:"bold"}) if($(this).next()[0].innerHTML == "United States"){ $(".countryHolder").html(us_svg) } else if($(this).next()[0].innerHTML == "India"){ $(".countryHolder").html(india_svg) } else if($(this).next()[0].innerHTML == "United Kingdom"){ $(".countryHolder").html(uk_svg) } else if($(this).next()[0].innerHTML == "Canada"){ $(".countryHolder").html(canada_svg) } else if($(this).next()[0].innerHTML == "Japan"){ $(".countryHolder").html(japan_svg) } else if($(this).next()[0].innerHTML == "Australia"){ $(".countryHolder").html(australia_svg) } else if($(this).next()[0].innerHTML == "Saudi Arabia"){ $(".countryHolder").html(saudi_arabia) } else if($(this).next()[0].innerHTML == "Belgium"){ $(".countryHolder").html(belgium) } else if($(this).next()[0].innerHTML == "Finland"){ $(".countryHolder").html(finland) } else if($(this).next()[0].innerHTML == "France"){ $(".countryHolder").html(france) } else if($(this).next()[0].innerHTML == "Germany"){ $(".countryHolder").html(germany) } else if($(this).next()[0].innerHTML == "Ireland"){ $(".countryHolder").html(ireland) } else if($(this).next()[0].innerHTML == "Korea, Dem. Rep."){ $(".countryHolder").html(south_korea) } else if($(this).next()[0].innerHTML == "Luxembourg"){ $(".countryHolder").html(luxembourg) } else if($(this).next()[0].innerHTML == "Netherlands"){ $(".countryHolder").html(netherland) } else if($(this).next()[0].innerHTML == "New Zealand"){ $(".countryHolder").html(new_zealand) } else if($(this).next()[0].innerHTML == "Norway"){ $(".countryHolder").html(south_korea) } else if($(this).next()[0].innerHTML == "Paraguay"){ $(".countryHolder").html(luxembourg) } else if($(this).next()[0].innerHTML == "Spain"){ $(".countryHolder").html(netherland) } else if($(this).next()[0].innerHTML == "Switzerland"){ $(".countryHolder").html(switzerland) } console.log(this.id) }; /*-------------------------Mouse out Dot function-----------------------*/ function handleMouseOut(d, i) { d3.select(this) .transition() .ease(d3.easeLinear) .attr("fill", "#00A2A9") .attr("r", function(){ return radius }) $(this).next().css({fill:"#000", fontWeight:"normal"}) }; 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="statsDiv"> <p class="statsP"></p> </div> <div id="countryDiv"></div> 

Answer 1

我已经将您所拥有的简化为我认为您要实现的目标。 我认为您在做什么都不需要使用jquery。

 const mapData = [{ "imgSrc": "australia_svg", "code": "AU", "name": "Australia", "value": 2, "color": "#BC204B" }, { "imgSrc": "belgium_svg", "code": "BE", "name": "Belgium", "value": 1, "color": "#BC204B" }, { "imgSrc": "other_americas_svg", "code": "BR", "name": "Other Americas", "value": 1, "color": "#BC204B" }, { "imgSrc": "canada_svg", "code": "CA", "name": "Canada", "value": 4, "color": "#BC204B" }, { "imgSrc": "finland_svg", "code": "FI", "name": "Finland", "value": 2, "color": "#BC204B" }, { "imgSrc": "france_svg", "code": "FR", "name": "France", "value": 1, "color": "#BC204B" }, { "imgSrc": "germany_svg", "code": "DE", "name": "Germany", "value": 14, "color": "#BC204B" }, { "imgSrc": "india_svg", "code": "IN", "name": "India", "value": 1, "color": "#BC204B" }, { "imgSrc": "ireland_svg", "code": "IE", "name": "Ireland", "value": 1, "color": "#BC204B" }, { "imgSrc": "japan_svg", "code": "JP", "name": "Japan", "value": 2, "color": "#BC204B" }, { "imgSrc": "korea_svg", "code": "KP", "name": "Korea, Dem. Rep.", "value": 1, "color": "#BC204B" }, { "imgSrc": "luxembourg_svg", "code": "LU", "name": "Luxembourg", "value": 1, "color": "#BC204B" }, { "imgSrc": "netherlands_svg", "code": "NL", "name": "Netherlands", "value": 2, "color": "#BC204B" }, { "imgSrc": "norway_svg", "code": "NZ", "name": "New Zealand", "value": 2, "color": "#BC204B" }, { "imgSrc": "new_zealand_svg", "code": "NO", "name": "Norway", "value": 2, "color": "#BC204B" }, { "imgSrc": "paraguay_svg", "code": "PY", "name": "Paraguay", "value": 1, "color": "#BC204B" }, { "imgSrc": "saudi_arabia_svg", "code": "SA", "name": "Saudi Arabia", "value": 2, "color": "#BC204B" }, { "imgSrc": "singapore_svg", "code": "SG", "name": "Singapore", "value": 1, "color": "#BC204B" }, { "imgSrc": "spain_svg", "code": "ES", "name": "Spain", "value": 1, "color": "#BC204B" }, { "imgSrc": "switzerland_svg", "code": "CH", "name": "Switzerland", "value": 6, "color": "#BC204B" }, { "imgSrc": "uk_svg", "code": "GB", "name": "United Kingdom", "value": 4, "color": "#BC204B" }, { "imgSrc": "us_svg", "code": "US", "name": "United States", "value": 4, "color": "#BC204B" } ]; // Setup const width = 512 const height = 600 const radius = 5 // Select the placeholder for the svg, // append and style the svg const svg = d3.select("#svgDiv") .append("svg") .attr("width", width) .attr("height", height) .style("background", "#dedede") // Select the placeholder for the list of countries // & append an empty list const countryList = d3.select("#countryDiv") .append("ul") // Bind data to the list and append an item for each data point const countryItem = countryList .selectAll("li") .data(mapData) .enter() .append("li") .html(d => d.name) .on("mouseover", mouseOverTextHandler) // Append a group which will house your circle and text const circleG = svg.append("g") // Append a circle & style it circleG.append("circle") .attr("r", "50") .attr("fill", "red") .attr("cx", "50") .attr("cy", "50") // Append text and align it to the circle sibling const circleText = circleG.append("text") .attr("dy", 50) .attr("dx", 50) .attr("text-anchor", "middle") // Handle our mouseover event with the relevant data point function mouseOverTextHandler(d, i) { circleText.text(d.name) } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id="countryDiv"></div> <div id="svgDiv"></div> 

Codepen