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中的图层顺序基于文档顺序。我不确定为什么它不能为你工作 - 它在以下片段中为我工作（也许你没有把它放在更新功能中？）。

有关详细信息，请参阅此处的规范有一些好的答案： How to use z-index in svg elements?

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

将文本放在d3中的形状上

1 个答案: