1

Вопрос вот в чем. Есть ли какая нибудь функция типа repaint(), как в java, чтобы обновить данные параметров линий и/или многоугольников на экране в d3.js.
Допустим есть линия, я изменил мышкой (колесиком) параметры линии x1,y1,x2,y2 и теперь нужно чтобы все это в ступило в силу...
В Mouse Wheel Event (Второй блок кода) есть переменная a ,b ,c ,d, e, f - при событии мышки должны меняться параметры отрисовки, а где и как это сделать (updatte() - не знаю.

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <style>
  </style>
</head>
<body>
<script>
  var R1=360.0;
  var R2=300.0;
  var R3=220.0;
  
  var delta=400.0;
  
  var p=(2*Math.PI)/366; 
  var x1 = [366+1];
  var y1 = [366+1];
  var x2 = [366+1];
  var y2 = [366+1];
  var x3 = [366+1];
  var y3 = [366+1];
  
  
  for(var i=0;i<=367;i++){
  y1[i]=R1*(Math.sin(i*p))+delta;
  x1[i]=R1*(Math.cos(i*p))+delta;
  y2[i]=R2*(Math.sin(i*p))+delta;
  x2[i]=R2*(Math.cos(i*p))+delta;
  y3[i]=R3*(Math.sin(i*p))+delta;
  x3[i]=R3*(Math.cos(i*p))+delta;
  }

var a="111";
var b="12";
var c="131";
var d="23";
var e="33";
var f="48";

var W1="";
var canvas = d3.select("body")
   .append("svg")
   .attr("height", 1366)
   .attr("width", 800);
for (var i =0;i<=365;i++){

var W=[8];
W[0]=(x1[i]).toString();
W[1]=(y1[i]).toString();
W[2]=(x1[i+1]).toString();
W[3]=(y1[i+1]).toString();
W[4]=(x2[i+1]).toString();
W[5]=(y2[i+1]).toString();
W[6]=(x2[i]).toString();
W[7]=(y2[i]).toString();
var 
//W1="55,55 100,100 300,555 777,888"; Такой формат должен быть везде.
W1=(W[0]+","+W[1]+" "+W[2]+"," +W[3]+" "+W[4]+","+W[5]+" "+W[6]+","+W[7]);//Здесь уже все работает

canvas.append("polygon")
   .attr("points", W1)
   .style("fill", "yellow")
   .style("stroke", "black")
   .style("strokeWidth", "5px");  

}
canvas.append("polygon")
   .attr("points", a+","+b+" "+ c+","+d+" " +e+","+f)
   .style("fill", "blue")
   .style("stroke", "black")
   .style("strokeWidth", "10px");
  // while(true){
   //
  
   
   
</script>
<script>


window.addEventListener("wheel", function(e) {
    var dir = Math.sign(e.deltaY);
    //alert(dir); Здесь должна быть отрисовка Динамическое изменение координат многоугольника синего (делаю календарь понимашь) по координатам a ,b ,c, d, e , f;
	a=a+1;
	b=b+1;
	c=c+1;
});

</script>
</body>

4
  • нужно обновить атрибуты DOM модели и все перерисуется само 18 фев 2020 в 11:58
  • можно поподробнее кучу времени уже потратил и ничего не выходит. 18 фев 2020 в 16:33
  • добавьте Ваш код в вопрос, чтобы не набивать его с нуля, а я доберусь домой и отвечу.. 18 фев 2020 в 16:34
  • Stranger in the Q, выложил код синий треугольник может менять координаты, и должен , но как его a b c d e f обновлять в Mouse Wheel Event Не знаю, Благодарю за помощь 18 фев 2020 в 17:01

1 ответ 1

2

Вызов

polygon.attr("points", [a,b,c,d,e,f])

присваивает значения атрибуту элемента, эту функцию и нужно вызвать повторно, после изменения значений переменных a b и c

var a=111;
var b=12;
var c=131;
var d=23;
var e=33;
var f=48;

var canvas = d3.select("body")
   .append("svg")
   .attr("height", 100)
   .attr("width", 500);

var polygon = canvas.append("polygon")
   .attr("points", [a,b,c,d,e,f])
   .style("fill", "blue")
   .style("stroke", "black")
   .style("strokeWidth", "10px");

window.addEventListener("wheel", function(ev) {
  var dir = Math.sign(ev.deltaY);
	a+=dir;
	b+=dir;
	c+=dir;
  polygon.attr("points", [a,b,c,d,e,f]);
});
<script src="https://d3js.org/d3.v5.min.js"></script>

4
  • Thanks so pleasure 18 фев 2020 в 18:17
  • Stranger in the Q, а как нарисовать линии много и также сделать с ними? Думаешь так же? So pleasure thanks sorry or what you may... 18 фев 2020 в 18:21
  • @ArthurAlunts в целом да, только например держать все данные в массиве 18 фев 2020 в 18:26
  • Ответ понял. Буду мстить. 23 фев 2020 в 7:08

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.