Saya sedang belajar D3.js. Saya menulis kode berikut yang menggerakkan lingkaran saat diklik. Saya ingin memindahkan lingkaran ini ke depan (+100px) dari posisinya saat ini pada setiap klik.

Saya ingin melakukannya tanpa CSS

Berikut adalah kode saya my

var svgContainer = d3.select("body").append("svg").attr("id", "root")
  .attr("width", 500)
  .attr("height", 500).append("g")


//Draw the Circle
var circle = svgContainer.append("circle")
  .attr("id", "Zubi")
  .attr("cx", 100)
  .attr("cy", 30)
  .attr("r", 20)
  .on("click", function() {
    d3.select(this)
      .transition()
      .duration(3000)
      .style("fill", "red")
      .attr("cx", 100)
  })
//.attr("transform", "translate(200,200)")})
1
Zubair 29 Oktober 2019, 07:39

1 menjawab

Jawaban Terbaik

Cara termudah untuk mencapai apa yang Anda inginkan adalah menggunakan pengambil (selection.attr("cx")) untuk mendapatkan posisi saat ini dan meningkatkannya. Anda juga dapat menggunakan translate, tetapi karena Anda seorang pelajar D3 menggunakan atribut cx lingkaran mungkin lebih mudah untuk dipahami.

Berikut adalah demo, setiap klik meningkat 50px:

const circle = d3.select("circle")
  .on("click", function() {
    d3.select(this)
      .transition()
      .attr("cx", +d3.select(this).attr("cx") + 50)
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100">
  <circle cx="50" cy="50" r="30" fill="teal"></circle>
</svg>

Ingatlah bahwa pengambil selalu mengembalikan string, jadi Anda harus memaksanya ke angka.

Juga, karena Anda hanya memiliki satu elemen dalam seleksi dan memiliki nama, Anda tidak perlu d3.select(this):

const circle = d3.select("circle")
  .on("click", function() {
    circle.transition()
      .attr("cx", +circle.attr("cx") + 50)
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg width="500" height="100">
  <circle cx="50" cy="50" r="30" fill="teal"></circle>
</svg>
2
Gerardo Furtado 29 Oktober 2019, 05:41