d3 treat text and circle as one object

debugcn 에 게시 Dev

Yan Yi

I've got some circles with text on them on a force layout. Tooltips are generated using d3-tip.

The problem is that even though I grouped both text and circle under one group, events like mouseover and click are still treating the two as separate objects.

When I hover over the text in the circle, a tooltip is shown. When I move my cursor out of the text (but still within the circle), the same tooltip is re-generated and shown, but in a slightly different position.

Is there any way I can make the two objects behave as one? I'm aiming for a seamless transition so the user is unaware that the two are separate objects.

Left: Mouse over circle Right: Mouse over text

enter image description here

 var tip = d3.tip()
        .attr("class", "d3-tip")
        .html(function(d) {return d["ModuleTitle"];});

    var vis = d3.select("body")
        .append("svg")
        .call(tip);

    var elem = svgContainer.selectAll("g")
        .data(nodesData);

    var elemEnter = elem.enter()
        .append("g")
        .on('mouseover', tip.show)
        .on('mousedown', tip.hide)
        .on('mouseout', tip.hide);

    var circle = elemEnter.append("circle")
        .attr("r", function(d) {return d.radius;})
        .style("fill", function(d, i) { return color(i % 20);})
        .call(force.drag);


    var text = elemEnter.append("text")
        .attr("text-anchor", "middle")
        .attr("font-family", "sans-serif")
        .attr("font-size", function(d) {return d.fontsize;})
        .attr("fill", "black")
        .text(function(d) {return d["ModuleCode"];});

Elijah

If you don't want your text to trigger events you should set its pointer-events style to none. You can do this in css:

 text {
  pointer-events: none;
 }

Or with D3 when you're creating the elements:

var text = elemEnter.append("text")
    .attr("text-anchor", "middle")
    .attr("font-family", "sans-serif")
    .attr("font-size", function(d) {return d.fontsize;})
    .attr("fill", "black")
    .style("pointer-events", "none")
    .text(function(d) {return d["ModuleCode"];});

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

d3 treat text and circle as one object

d3 treat text and circle as one object

Text in center of Circle

animating text to rotate around a circle

D3/Raphael js draws 1000+ animated circle with slow fps

is it possible to tweak the d3 bubble chart to obtain the bubbles at scattered positions instead of a circle pack?

How can I treat my disk like one big file?

Two labels on one node in a D3 force layout

D3 mouseover effect for each chart on one page

D3 Display Text from API Call

How to turn a hclust-object into JSON for D3?

D3 array object format not being picked up

JQuery TimeCircles - display minutes and seconds in one circle

D3 + Leaflet Circle SVG 요소가 색상을 표시하지 않음

d3.js circle hover animation

Getting values from point object, that is used as center for a circle object in Java

How to add small circle into big circle in css3?

Condense all my snippets into one file in Sublime Text 3

Why does Excel treat long numeric strings as scientific notation even after changing cell format to text

How can I update text-label in d3 donut according with my array's data

D3 does not maintain object constancy even when there is a key function

how to create circle that cut off one piece with css

IE11의 D3 Zoomable Circle Packing이 SVG 경계를 넘어 확장됩니다.

AttributeError: 'AxesSubplot' object has no attribute 'Circle' Embedding matplotlib in tkinter

D3js find closest point on circle

Create an object if one is not found

CSS3 - Move SVG Circle

sort List of Object by one of Object's field

sort List of Object by one of Object's field

Converting object of a class to of another one

merge one text with another text and print to new one with change in one field