Question

我想重用项目的一般更新模式III 想知道如何使用圆形元素更好地排列文本标签。我的实验是将圆圈元素和文字附加到＆＃34; g＆＃34;，但我无法正确放置文字标签。

以下是我修改块的方法：

<!DOCTYPE html>
<meta charset="utf-8">
<style>

text {
  font: bold 28px monospace;
}

.enter {
  fill: green;
}

.update {
  //fill: #333;
  fill: red;
}

.exit {
  //fill: brown;
  fill: blue;
}

</style>
<body>
<script src="../d3.v3.js"></script>
<script>

function randomData(){
               return d3.range(~~(Math.random()*50)+1).map(function(d,   i){return ~~(Math.random()*100);});
                }


var alphabet = "";
var numlist = [];
var randomEntry;
             for (i = 0; i< 2; i++) {
           randomEntry = randomData();
       numlist.push( randomEntry);
       }
var temp = numlist.toString();
var temp2 = temp.split('"');
alphabet = temp2.pop();
console.log("alphabet", alphabet);
var temp3  = alphabet.toString();
 console.log("temp3", temp3);
 console.log("temp3 type", typeof(temp3));

 var temp4 = alphabet.split(",");
 alphabet = temp4;
 console.log("alphabet", alphabet);


var width = 960,
height = 500;

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

function update(data) {

  // DATA JOIN
  // Join new data with old elements, if any.
  var text = svg.selectAll("text")
      .data(data, function(d) { return d; });

  var circles = svg.selectAll("circle")
      .data(data, function(d) { return d; });

  // UPDATE
  // Update old elements as needed.
  circles.attr("class", "update")
    .transition()
      .duration(750)
      .attr("opacity", 0.3)
      .attr("cx", function(d,i) { return (Math.random(i))*100;})
      .attr("cy", function(d,i) { return (Math.random(i))*100;})
      .attr("transform", "translate(200," + (-100) + ")");

  text.attr("class", "update")
    .transition()
      .duration(750)
       .attr("x", function(d,i) { return (Math.random(i))*100; })
      .attr("y", function(d,i) { return (Math.random(i))*100; })
      .attr("transform", "translate(200," + (-100) + ")");


  // ENTER
  // Create new elements as needed.
  circles.enter().append("circle")
      .attr("class", "enter")
      .attr("opacity", 0.3)
      .attr("r", 25)
      .attr("cy", function(d,i) { return (Math.random(i))*270;})
      .attr("cx", function(d,i) { return (Math.random(i))*270;})
      .style("fill-opacity", 1e-6)

    .transition()
      .duration(750)
      .attr("r", 30)
      .style("fill-opacity", 1);


  text.enter().append("text")
      .attr("class", "enter")
      .attr("dy", ".25em")
       .attr("x", function(d) { return (Math.random(i))*100; })
      .attr("y", function(d) { return (Math.random(i))*100; })
      .style("fill-opacity", 1e-6)
      .text(function(d) { return d; })
      .transition()
      .duration(750)
      .style("fill-opacity", 1);


  // EXIT
  // Remove old elements as needed.
  text.exit()
      .attr("class", "exit")
     .transition()
      .duration(750)
      .attr("y", 60)
      .style("fill-opacity", 1e-6)
      .remove();

  circles.exit()
      .attr("class", "exit")
    .transition()
      .duration(750)

     .style("fill-opacity", 1e-6)
      .remove();
 }

// The initial display.
 update(alphabet);

// Grab a random sample of letters from the alphabet, in alphabetical     order.
   setInterval(function() {
     update(shuffle(alphabet)
     .slice(0, Math.floor(Math.random() * 26))
     .sort());
}, 1500);

// Shuffles the input array.
 function shuffle(array) {
  var m = array.length, t, i;
  while (m) {
   i = Math.floor(Math.random() * m--);
    t = array[m], array[m] = array[i], array[i] = t;
  }
  return array;
 }

 </script>

如何更改此设置，以便文本标签显示在圆圈元素旁边？感谢您的帮助。

Answer 1

你似乎在制作一个随机数据来确定圆圈的圈子cx和cy：

  .attr("cy", function(d,i) { return (Math.random(i))*270;})
  .attr("cx", function(d,i) { return (Math.random(i))*270;})

在文本DOM中，您可以使用随机点来确定文本的x和y。

  .attr("x", function(d) { return (Math.random(i))*100; })
  .attr("y", function(d) { return (Math.random(i))*100; })

所以作为一个修复，你可以有一个公共数据来决定文本的x / y和圆圈的cx / cy。

通过制作这样的函数：

function randomData() {
  return (Math.random() * 500);//his generates a single random point
}


var alphabet = [];

function randomEntry() {
  var numlist = [];

  var randomEntry;
  for (i = 0; i < 5; i++) {
    //generate 5 random coordinate
    //here first element willdecide the x and second element decide the y.
    numlist.push([randomData(), randomData()]);
  }
  //this will contain 5 coordinate points.
  return numlist;
}

然后在文本中设置5个坐标点数据，如下所示：

  var text = svg.selectAll("text")
    .data(data, function(d) {
      return d;
    });

  var circles = svg.selectAll("circle")
    .data(data, function(d) {
      return d;
    });

然后在更新中

  circles.attr("class", "update")
    .transition()
    .duration(750)
    .attr("opacity", 0.3)
    .attr("cx", function(d, i) {
      return d[0];//here d[0] is the x coordinate which determine the circle center x
    })
    .attr("cy", function(d, i) {
      return d[1];//here d[1] is the y coordinate which determine the circle center y
    })

  text.attr("class", "update")
    .transition()
    .duration(750)
    .attr("x", function(d, i) {
      return d[0];
    })
    .attr("y", function(d, i) {
      return d[1];
    })

工作代码here

希望这有帮助！

修改MB的一般更新模式III以重新定位文本

1 个答案: