使用JS将文本值添加到html页面的圆圈中

时间：2018-03-29 17:37:35

标签： javascript d3.js

我有一个HTML页面，我试图在其中显示天空图。对于显示，我使用D3中的JS库。 这是我的代码：

var deg2rad = Math.PI/180;
var width = 400, height = 350, radius = Math.min(width, height) / 2 - 30;

var svg = d3.select("#chart").append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var r = d3.scale.linear()
            .domain([90, 0])
            .range([0, radius]);

var line = d3.svg.line.radial()
            .radius(function(d) {return r(d[1]);})
            .angle(function(d) {return -d[0] + Math.PI / 2;});

var gr = null;

createSkyplot();

function createSkyplot(){         
    gr = svg.append("g")
                .attr("class", "r axis")
                .selectAll("g")
                .data(r.ticks(5))
                .enter().append("g");

    gr.append("circle").attr("r", r).style('fill', 'white');

    gr.append("text")
        .attr("y", function(d) { return -r(d) - 4; })
        .attr("transform", "rotate(20)")
        .style("text-anchor", "middle")
        .style('fill', 'blue')
        .text(function(d) { return d;});

    var ga = svg.append("g")
                .attr("class", "a axis")
                .selectAll("g")
                .data(d3.range(0, 360, 45))
                .enter().append("g")
                .attr("transform", function(d) {return "rotate(" + (d - 90) + ")";});

    ga.append("line").attr("x2", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');

    ga.append("text")
        .attr("x", radius + 6)
        .attr("dy", ".35em")
        .style("text-anchor", function(d) { return d < 360 && d > 90 ? "end" : null; })
        .attr("transform", function(d) { return d < 360 && d > 90 ? "rotate(180 " + (radius + 3) + ",0)" : null; })
        .text(function(d) { return d + "°"; });
}

function updateSkyPlot(d){
    var pos = [];
    var inview = d.inView;

    for (var elem in inview){
        if (inview.hasOwnProperty(elem)) {
            console.log(inview[elem].data[0]);
            // the azimuth should be in radians and substracted from (Math.PI/2)
            var d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]]; 
            pos.push(d);
        }
    }

    var r = d3.scale.linear()
        .domain([90, 0])
        .range([0, radius]);

    var line = d3.svg.line.radial()
        .radius(function(d) {return r(d[1]);})
        .angle(function(d) {return -d[0] + Math.PI / 2;});

    var color = d3.scale.category20();

    svg.selectAll('circle').remove();

    gr.append("circle").attr("r", r).style('fill', 'white');

    svg.selectAll("point").data(pos).enter().append("circle").attr("class", "point")
        .attr("transform", function(d) {
                var coors = line([d]).slice(1).slice(0, -1);
                return "translate(" + coors + ")"})
        .attr("r", 8)
        .attr("fill",function(d,i){return color(i);});

}

我使用updateSkyPlot(d)方法更新图表。此方法的输入是下一个类型的JSON对象： {"type" : "data", "inView" : {[prn, elv, azi], [prn, elv, azi] ..}}。

当我在HTML页面中运行此代码时，我能够生成下一个图： enter image description here

我的问题是，在相应的圈子中添加prn号码的最佳方法是什么？ 我应该在代码中添加什么才能使其正常工作？ 任何帮助将不胜感激，谢谢。

以下是完整的HTML代码段：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<meta charset='ISO-8859-1'>
		<script src="https://d3js.org/d3.v3.min.js"></script>
	</head>

	<body style='background-color:lightgray'>
		<div id="chart" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>

		<script>
			var deg2rad = Math.PI/180;
            var width = 400, height = 350, radius = Math.min(width, height) / 2 - 30;

            var svg = d3.select("#chart").append("svg")
			    .attr("width", width)
			    .attr("height", height)
			    .append("g")
			    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
				  
            var r = d3.scale.linear()
			    .domain([90, 0])
			    .range([0, radius]);
  
           var line = d3.svg.line.radial()
			    .radius(function(d) {return r(d[1]);})
			    .angle(function(d) {return -d[0] + Math.PI / 2;});

            var gr = null;

            createSkyplot();

			var json = {"type" : "GSV",
                        "inView" : [{"data" : [1, 45, 90]},
                                    {"data" : [3, 70, 225]}]
                       };
                       
            updateSkyPlot(json);

            function createSkyplot(){	
	            //////////////////////			  
	            gr = svg.append("g")
				    .attr("class", "r axis")
				    .selectAll("g")
				    .data(r.ticks(5))
				    .enter().append("g");

                gr.append("circle").attr("r", r).style('fill', 'white');

	            gr.append("text")
		            .attr("y", function(d) { return -r(d) - 4; })
		            .attr("transform", "rotate(20)")
		            .style("text-anchor", "middle")
		            .style('fill', 'blue')
    	            .text(function(d) { return d;});
	            /////////////////////

	            /////////////////////
	            var ga = svg.append("g")
				    .attr("class", "a axis")
				    .selectAll("g")
				    .data(d3.range(0, 360, 45))
				    .enter().append("g")
      			    .attr("transform", function(d) {return "rotate(" + (d - 90) + ")";});

                ga.append("line").attr("x2", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');
	  
	            ga.append("text")
    	            .attr("x", radius + 6)
    	            .attr("dy", ".35em")
    	            .style("text-anchor", function(d) { return d < 360 && d > 90 ? "end" : null; })
		            .attr("transform", function(d) { return d < 360 && d > 90 ? "rotate(180 " + (radius + 3) + ",0)" : null; })
    	            .text(function(d) { return d + "°"; });
	            /////////////////////
            }

function updateSkyPlot(d){
	var pos = [];
	var inview = d.inView;

	for (var elem in inview){
		if (inview.hasOwnProperty(elem)) {
			// the azimuth should be in radians and substracted from (Math.PI/2)
			var d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]]; 
			pos.push(d);
		}
	}

	var r = d3.scale.linear()
		.domain([90, 0])
		.range([0, radius]);

	var line = d3.svg.line.radial()
		.radius(function(d) {return r(d[1]);})
		.angle(function(d) {return -d[0] + Math.PI / 2;});

	var color = d3.scale.category20();

	svg.selectAll('circle').remove();

	gr.append("circle").attr("r", r).style('fill', 'white');

    svg.selectAll("point").data(pos).enter().append("circle").attr("class", "point")
      	.attr("transform", function(d) {
        		var coors = line([d]).slice(1).slice(0, -1);
        		return "translate(" + coors + ")"})
      	.attr("r", 8)
		.attr("fill",function(d,i){return color(i);});
		
}

		</script>

	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

这是一种可能性：

＆＃13;
＆＃13; 
<!DOCTYPE html>
<html>
	<head>
		<meta charset='ISO-8859-1'>
		<script src="https://d3js.org/d3.v3.min.js"></script>
	</head>

	<body style='background-color:lightgray'>
		<div id="chart" style='width: 400px; height: 400px; padding-left: 5px; padding-bottom: 5px;'></div>

		<script>
			var deg2rad = Math.PI/180;
            var width = 400, height = 350, radius = Math.min(width, height) / 2 - 30;

            var svg = d3.select("#chart").append("svg")
			    .attr("width", width)
			    .attr("height", height)
			    .append("g")
			    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
				  
            var r = d3.scale.linear()
			    .domain([90, 0])
			    .range([0, radius]);
  
           var line = d3.svg.line.radial()
			    .radius(function(d) {return r(d[1]);})
			    .angle(function(d) {return -d[0] + Math.PI / 2;});

            var gr = null;

            createSkyplot();

			var json = {"type" : "GSV",
                        "inView" : [{"data" : [1, 45, 90]},
                                    {"data" : [3, 70, 225]}]
                       };
                       
            updateSkyPlot(json);

            function createSkyplot(){	
	            //////////////////////			  
	            gr = svg.append("g")
				    .attr("class", "r axis")
				    .selectAll("g")
				    .data(r.ticks(5))
				    .enter().append("g");

                gr.append("circle").attr("r", r).style('fill', 'white');

	            gr.append("text")
		            .attr("y", function(d) { return -r(d) - 4; })
		            .attr("transform", "rotate(20)")
		            .style("text-anchor", "middle")
		            .style('fill', 'blue')
    	            .text(function(d) { return d;});
	            /////////////////////

	            /////////////////////
	            var ga = svg.append("g")
				    .attr("class", "a axis")
				    .selectAll("g")
				    .data(d3.range(0, 360, 45))
				    .enter().append("g")
      			    .attr("transform", function(d) {return "rotate(" + (d - 90) + ")";});

                ga.append("line").attr("x2", radius).style('stroke', 'black').style('stroke-dasharray', '1,8');
	  
	            ga.append("text")
    	            .attr("x", radius + 6)
    	            .attr("dy", ".35em")
    	            .style("text-anchor", function(d) { return d < 360 && d > 90 ? "end" : null; })
		            .attr("transform", function(d) { return d < 360 && d > 90 ? "rotate(180 " + (radius + 3) + ",0)" : null; })
    	            .text(function(d) { return d + "°"; });
	            /////////////////////
            }

function updateSkyPlot(d){
	var pos = [];
	var inview = d.inView;

	for (var elem in inview){
		if (inview.hasOwnProperty(elem)) {
			// the azimuth should be in radians and substracted from (Math.PI/2)
			var d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]]; 
			pos.push({ "angle": d, "label": inview[elem].data[0] });
		}
	}

	var r = d3.scale.linear()
		.domain([90, 0])
		.range([0, radius]);

	var line = d3.svg.line.radial()
		.radius(function(d) {return r(d[1]);})
		.angle(function(d) {return -d[0] + Math.PI / 2;});

	var color = d3.scale.category20();

	svg.selectAll('circle').remove();

	gr.append("circle").attr("r", r).style('fill', 'white');

    var points = svg.selectAll("point")
    	.data(pos)
    	.enter()
    	.append("a")
    	.attr("transform", function(d) {
    		var coors = line([d.angle]).slice(1).slice(0, -1);
    		return "translate(" + coors + ")"
    	});

    points.append("circle")
    	.attr("class", "point")
      	.attr("r", 8)
		.attr("fill",function(d,i){return color(i);});

	points.append("text")
		.text( function(d) { return d.label })
		.attr("transform", "translate(-4,5)")
		
}

		</script>

	</body>
</html>
＆＃13;
＆＃13;
＆＃13;

我已将标签保留在数据中（当您创建带圆圈位置的pos数组时）：

var pos = [];

for (var elem in inview) {
    if (inview.hasOwnProperty(elem)) {
        var d = [(Math.PI/2) - inview[elem].data[2]*deg2rad, inview[elem].data[1]]; 
        // This is the modified line:
        pos.push({ "position": d, "label": inview[elem].data[0] });
        // pos.push(d);
    }
}

然后我不是直接创建圆圈，而是创建一个中间容器，它将为每个数据点包含圆圈和文本标签;并将其转换为其职位：

var points = svg.selectAll("point")
    .data(pos)
    .enter()
    .append("a") // The container
    .attr("transform", function(d) {
        var coors = line([d.position]).slice(1).slice(0, -1);
        return "translate(" + coors + ")"
    });

这样我们就可以为每个数据点包括圆圈：

points.append("circle")
    .attr("class", "point")
    .attr("r", 8)
    .attr("fill",function(d,i){return color(i);});

和标签：

points.append("text")
    .text( function(d) { return d.label })
    .attr("transform", "translate(-4,5)")
相关问题
最新问题