如何修复内含文本的气泡图中的可拖动函数？
如何修复内含文本的气泡图中的可拖动函数？
提问于 2019-04-15 02:24:20
我正在设置一个新的气泡图，并希望每个气泡内都可以拖动缩写名称。draggable函数工作正常，气泡(没有)显示在正确的位置。但是，当我尝试在每个气泡中添加文本时，它们总是显示在左上角。此外，当我尝试拖放时，文本不会移动(只有气泡)。
我尝试将文本和气泡附加到节点，但对我不起作用。
我使用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
Stack Overflow用户
回答已采纳
发布于 2019-04-15 02:37:00
您的g元素已经定位(但请参阅下面的正确属性)并处理拖动。从circle和text元素中删除对d3的调用，同时从text元素中删除cx和cy属性。
将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 gallery永远是灵感的源泉。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55678578
复制相关文章
相似问题
腾讯云开发者
