在d3中的形状上放置文本

Question

我的目标是把D3圈在svg ，我已经追加到后面的文字svg 。 到目前为止，我尝试将附加文本的代码放置在附加圆圈的代码之后 ，但是此方法不起作用。

我不熟悉如何使用d3来排序元素，因此不胜感激。

以下是演示此问题的代码段：

 // create data var data = []; for (var i=0; i < 108; i++) { data.push(i); } // Scale for radius var xr = d3.scale .linear() .domain([0, 108]) .range([0, 27]); // Scale for random position var randomPosition = function(d) { return Math.random() * 1280; } var tcColours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD']; var randomTcColour = function() { return Math.floor(Math.random() * tcColours.length); }; // SVG viewport var svg = d3.select('body') .append('svg') .attr('width', 1280) .attr('height', 512); svg.append("text") .attr("x", 100) .attr("y", 100) .attr("text-anchor", "middle") .style("font-size", "36px") .style('fill', 'white') .text("Lorem ipsum"); var update = function() { var baseCircle = svg.selectAll('circle'); // Bind data baseCircle = baseCircle.data(data); // set the circles baseCircle.transition() .duration(40000) .attr('r', xr) .attr('cx', randomPosition) .attr('cy', randomPosition) .attr('fill', "none") .attr("stroke-width", 4) .style('stroke', tcColours[randomTcColour()]) baseCircle.enter() .append('circle') .attr('r', xr) .attr('cx', randomPosition) .attr('cy', randomPosition) .attr('fill', "none") .attr("stroke-width", 4) .style('stroke', tcColours[randomTcColour()]) .style('opacity', 1); } setTimeout(function () { update(); //do something once }, 500); window.onload = function() { update(); setInterval(update, 50000); }; 

 html, body, main { height: 100%; background-color: #130C0E; padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } svg { width: 100%; height: 99%; /* gets rid of scrollbar */ } 

 <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> 

Answer 1

快速简便的方法是在最后附加文本。 SVG中的层顺序基于文档顺序。 我不确定为什么它对您不起作用-在以下代码段中对我有用（也许您没有将其放入更新功能中？）。

有关更多详细信息，这里有一些引用规范的好的答案： 如何在svg元素中使用z-index？

 // create data var data = []; for (var i=0; i < 108; i++) { data.push(i); } // Scale for radius var xr = d3.scale .linear() .domain([0, 108]) .range([0, 27]); // Scale for random position var randomPosition = function(d) { return Math.random() * 1280; } var tcColours = ['#FDBB30', '#EE3124', '#EC008C', '#F47521', '#7AC143', '#00B0DD']; var randomTcColour = function() { return Math.floor(Math.random() * tcColours.length); }; // SVG viewport var svg = d3.select('body') .append('svg') .attr('width', 1280) .attr('height', 512); var update = function() { var baseCircle = svg.selectAll('circle'); // Bind data baseCircle = baseCircle.data(data); // set the circles baseCircle.transition() .duration(40000) .attr('r', xr) .attr('cx', randomPosition) .attr('cy', randomPosition) .attr('fill', "none") .attr("stroke-width", 4) .style('stroke', tcColours[randomTcColour()]) baseCircle.enter() .append('circle') .attr('r', xr) .attr('cx', randomPosition) .attr('cy', randomPosition) .attr('fill', "none") .attr("stroke-width", 4) .style('stroke', tcColours[randomTcColour()]) .style('opacity', 1); svg.append("text") .attr("x", 100) .attr("y", 100) .attr("text-anchor", "middle") .style("font-size", "36px") .style('fill', 'white') .text("Lorem ipsum"); } setTimeout(function () { update(); //do something once }, 500); window.onload = function() { update(); setInterval(update, 50000); }; 

 html, body, main { height: 100%; background-color: #130C0E; padding: 0; margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } svg { width: 100%; height: 99%; /* gets rid of scrollbar */ } 

 <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>