我创建了一个将鼠标悬停在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>
答案 0 :(得分：2)
我已经将您所拥有的简化为我认为您要实现的目标。我认为您在做什么都不需要使用jquery。
var array = [ 'a>46', 'a>86', 'h>78' ]
console.log(array.sort((a,b) => a.substring(2) - b.substring(2)));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)
}