#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 .