Question

我必须根据数据（经度和纬度）绘制三个圆圈。我想在范围滑块的每个值上绘制一个新的圆（值从1到3）。这意味着当我具有滑块1的值时，我只需要第一个圆，就必须将其放置在数据（经度和纬度）的第一个位置上。当我将值更改为2时，我需要有两个圆圈（必须保留第一个圆圈，并且必须根据第二个经度和纬度来显示第二个圆圈，等等。

当我更新滑块的每个值时，我会在正确的位置接收到所有三个圆圈，但同时会收到所有三个圆圈。

这是我的代码：

circles: function  (){

  let data = [
  {longitude:13.41053,latitude:52.52437},
  {longitude:9.17702,latitude:48.78232},
  {longitude:8.80777,latitude:53.07516}
  ]

 let projection  = this.projection;

  let svg = d3.select(".ti").append("svg")

  let circles = svg.selectAll("circle")
  .data(data)
  .enter()
  .append("circle")
  .attr("cx",function(d) { return projection([d.longitude,d.latitude])[0];})
  .attr("cy",function(d) { return projection([d.longitude,d.latitude])[1];})
  .attr("r",9)
  .style("fill", "red")
    },
  }

<input
  id="input"
    type="range"
    min="0"
    max={this.max}
    step="1"
    value={this.node.sum}
    onClick={this.circles.bind()}/>

Answer 1

当不再需要circle元素时，可能需要从DOM中删除它们。就像您使用enter选择方法在DOM中创建虚拟元素一样，您也可以使用exit选择方法将其删除。您可以阅读更多here。

我会做这样的事情：

// Join data
let circles = svg.selectAll("circle").data(data)

// Remove unwanted circles
circles.exit().remove()

// Create circles
circles
  .enter()
  .append("circle")
  .attr("cx",function(d) { return projection([d.longitude,d.latitude])[0];})
  .attr("cy",function(d) { return projection([d.longitude,d.latitude])[1];})
  .attr("r",9)
  .style("fill", "red")

一个玩具示例：

// Select the SVG container
const svg = d3.select('#canvas')
  .append('svg')
  .attr('width', 50)
  .attr('height', 50)
  .style('border', '2px solid black')

const slider = document.querySelector('#slider')

let data = [{
    x: 13,
    y: 38
  },
  {
    x: 32,
    y: 25
  },
  {
    x: 28,
    y: 17
  }
]

const renderCircles = (n) => {
  // Slice data array
  const newData = data.slice(0, n)

  // Join data
  const circles = svg.selectAll('circle').data(newData)

  // Remove circles from DOM
  circles.exit().remove()

  // Enter circles in DOM
  circles.enter()
    .append('circle')
    .attr('fill', 'red')
    .attr('r', 5)
    .attr('cx', d => d.x)
    .attr('cy', d => d.y)
    .attr('stroke', 'black')
}

function updateCircles() {
  renderCircles(slider.value)
}

renderCircles(slider.value)

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>D3.js Slider Circles</title>
</head>

<body>

  <input type="range" name="slider" id="slider" value="1" min="0" max="3" step="1" oninput="updateCircles()">

  <div id="canvas"></div>

  <script src="https://d3js.org/d3.v5.js"></script>
  <script src="index.js"></script>

</body>

</html>

d3：使用滑块

1 个答案: