javascript - D3JS : help to create a SVG text element inside a circle using D3js

标签 javascript d3.js

我创建了一个代码，当鼠标悬停在 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>

最佳答案

我已将您所拥有的简化为我认为您正在努力实现的目标。我认为没有必要为您正在做的事情使用 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

关于javascript - D3JS : help to create a SVG text element inside a circle using D3js，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52065925/

上一篇：javascript - 按变量在字符串中出现的次数

下一篇：javascript - express 返回帖子信息由另一个功能处理

相关文章：

javascript - 删除并破坏 angularjs 中特定位置的 json 数据

javascript - $q 推迟在 Jasmine 中不触发延续

javascript - 如何为具有一个分支和多个子项的数据集以不同颜色显示 d3 气泡？

javascript - d3.js 应用颜色范围不适用于 JSON

javascript - 获取查询选择器值 d3.js

javascript - d3js : Unable to set a value to . attr ("font-size") 正确，在两者之间使用 if else 检查函数

javascript - Angularjs ng-switch 是否可以不重新渲染 View ？

javascript - 如何停止处理直到 setTimeout() 完成？

javascript - 在另一个变量的字符串值之后命名一个变量

javascript - D3js "bars.enter().attr"不是一个函数

©2024 IT工具网  联系我们