D3.js入门之D3 DataJoin的使用

const circles = [
    { text: 1, color: "red" },
    { text: 2, color: "green" },
    { text: 3, color: "blue" }
];

svg.selectAll("circle")
    .data(circles) // 绑定数据
    .enter() // 获取有数据没dom的集合
    .append("circle")
    .attr("class", "circle")
    .attr("id", (d) => `circle${d.text}`) // d 表示 data绑定的数据中的一项
    .attr("cx", (d) => 50 * d.text)
    .attr("cy", 50)
    .attr("r", 20)
    .attr("fill", (d) => d.color);

<div id="dataEnter">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

const update = d3.select("#dataEnter")
  .selectAll("p")
  .data(arr)
  .text((d) => d);

d3.select("#dataEnter")
  .selectAll("p")
  .data(arr)
  .enter()
  .append("p")
  .text((d) => d);

const arr = [1,2,3]

d3.select("#dataEnter")
  .selectAll("p")
  .data(arr)
  .text((d) => d)
  .exit()
  .remove();

const datumDom = d3.select("#datum")
    .selectAll("p")
    .datum(circles)
    .text((d) => {
        console.log(d);
        return JSON.stringify(d);
    });

const arr = [1, 2, 3];

svg.selectAll("circle")
    .data(arr)
    .join("circle")
    .attr("cx", (d) => d * 50)
    .attr("cy", (d) => d * 50)
    .attr("r", 16)
    .attr("fill", "#F89301");

const circle = svg.selectAll("circle").data(arr);

const newCircle = circle.enter()
    .append("circle")
    .merge(circle)
    .attr("cx", (d) => d * 50)
    .attr("cy", (d) => d * 50)
    .attr("r", 16)
    .attr("fill", "#F89301");