Как исправить перетаскиваемую функцию в пузырьковой диаграмме с текстом внутри?

#javascript #d3.js

#javascript #d3.js

Вопрос:

Я настраиваю новую пузырьковую диаграмму и хочу, чтобы ее можно было перетаскивать с сокращенными именами внутри каждого пузырька. Перетаскиваемая функция работает нормально, и пузырь (без) отображается в правильном положении. Но когда я пытаюсь добавить текст внутри каждого пузырька, они всегда отображаются в верхнем левом углу. Также, когда я пытаюсь перетащить текст, текст не перемещается (только пузырь).

введите описание изображения здесь

Я попытался добавить текст и пузырьки к узлам, но у меня это не работает.

Я использую d3.v4 (https://d3js.org/d3.v4.js) и (https://d3js.org/d3.v4.min.js)

Пузырьки без текста внутри — работает нормально

   svg.append('g')
    .selectAll("dot")
    .data(data)
    .enter()
    .append("circle")
      .attr("class", "bubbles")
      .attr("cx", function (d) { return x(d.Interest); } )
      .attr("cy", function (d) { return y(d.Influence); } )
      .attr("r", function (d) { return z(d.bubbleSize); } )
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
      .style("fill", function (d) { return myColor(d.bubbleColor); } )

  

Пузырьки с текстом внутри. Ошибки: неправильно позиционируется, и текст не перемещается вместе с пузырьком при перетаскивании

   var node = svg.selectAll(".node")
  .data(data)
  .enter().append('g')
  .attr("class", "node")
  .attr("cx", function (d) { return x(d.Interest); } )
  .attr("cy", function (d) { return y(d.Influence); } )
  .call(d3.drag()
  .on("start", dragstarted)
  .on("drag", dragged)
  .on("end", dragended))
  ;



     node.append("circle")
      .attr("class", "bubbles")
      .attr("r", function (d) { return z(d.bubbleSize); } )
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended))
      .style("fill", function (d) { return myColor(d.bubbleColor); } )

    ;

    node.append("text")
    .attr("class", "text")
    .attr("cx", function (d) { return x(d.Interest); } )
    .attr("cy", function (d) { return y(d.Influence); } )
.attr("dx", -10)
.attr("dy", ".35em")
.text(function (d) {
return d.shortName
}).style("stroke", "black")
      .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));
  

Я ожидаю, что пузырьки с текстом будут отображаться в том же положении, что и пузырьки без текста, а также при перетаскивании — перетаскивать как пузырь, так и текст, но это не работает.

Ответ №1:

Ваш g элемент уже позиционирован (но правильный атрибут см. Ниже) и обрабатывает перетаскивание. Удалите вызовы d3.drag из элементов circle and text , также удалите атрибуты cx and cy из text элемента.

Добавить pointer-events: all; в .node класс CSS. Это позволяет g элементу обрабатывать все события мыши.

Чтобы правильно расположить элементы g, используйте transform вместо cx и cy (которые применяются только к circle элементу:

 
.attr("transform", function (d) { var r = z(d.bubbleSize); return "translate("   (x(d.Interest) - r)   ","   (y(d.Influence) - r)   ")"; } )
  

Галерея d3 всегда является отличным источником вдохновения.

Комментарии:

1. Я удалил атрибуты «cx» и «cy» из элемента «text» и d3.drag из «circle» и «text», но теперь функция перетаскивания вообще не работает.

2. Это решило проблему с позицией, но функция перетаскивания по-прежнему не работает.

3. Вам нужно будет изменить свои функции перетаскивания, поскольку теперь вам нужно перемещать g элементы с помощью атрибута transform .