Блог

Главная - Вопросы по программированию - Используя D3, как можно создать график повторяющейся области

Используя D3, как можно создать график повторяющейся области

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я пытаюсь создать график с фиксированной осью X (угол 0-360 градусов), чтобы я хотел, чтобы пользователь мог перемещать график, и когда он выходит за пределы диапазона, он снова начинает повторяться. Любые предложения о том, как заставить график повторяться?

Упрощенная версия проблемы:

 const data = [{x:0,y:10},{x:30,y:20},{x:60,y:30},{x:90,y:40},{x:120,y:30},{x:150,y:20},{x:180,y:10},{x:210,y:20},{x:240,y:30},{x:270,y:40},{x:300,y:30},{x:330,y:20},{x:360,y:10}];
const width = 600;
const height= 200;

const svg = d3.select("svg");
const range = document.getElementById("range");

svg.attr('viewBox', [0, 0, width, height]);

const altitudeScale = d3.scaleLinear().range([height, 0]);
const azimuthScale = d3.scaleLinear().range([0, width]);
altitudeScale.domain([0, 100]);
azimuthScale.domain([0, 120]);

const pathElement = svg
      .append('path')
      .attr('fill', 'rgba(80,200,80,0.8)')
      .attr('stroke', 'green')
      .attr('stroke-width', 0.5)
      .attr('stroke-linejoin', 'round')
      .attr('stroke-linecap', 'round');
      
const update = () => {
  const val =  range.value;
  pathElement.datum(data)
    .call(path =>
      path.attr(
        'd',
        d3.area()
          .x(d => azimuthScale(d.x))
          .y0(height)
          .y1(d => altitudeScale(d.y))
      ));
  azimuthScale.domain([val, 120   val]);
}

update()
range.addEventListener("input", update); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<svg></svg>
<input min=-360 max=720 type=range id="range">