0

I am using CSS to show font size and background color on mouseover on text in D3.js

d3.select(this).append("text")
.classed("hover", true)
.attr('transform', function(d){ 
  return 'translate(5, 50)';
})
.text(d.name);

"hover" class is not appling, its just displaying simple text

here is my CSS class

text.hover {
        position: absolute;
        text-align: left;

        background-color: #FFFFEF;
        width: 400px;
        height: 135px;
        padding: 10px;
        border: 1px solid #D5D5D5;
        font-family: arial,helvetica,sans-serif;
        position: absolute;
        font-size: 1.1em;
        color: #333;
        padding: 10px;
        border-radius: 3px;
        background-color: rgba(255,255,255,0.9);
        color: #000;
        box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.4);
        border:1px solid rgba(200,200,200,0.85);
    }

What is the best way to apply CSS on text

Aman
  • 33
  • 5
  • 2
    That `css` looks a lot like you are treating your `text` element like it's HTML. It's an SVG element and [things are a little different](https://www.w3.org/TR/SVG/styling.html). – Mark Apr 05 '16 at 20:20

2 Answers2

1

The way you are handling the text is like you want it to be a div. You are using the wrong attributes, how can text have a background fill ?

I have edited the fiddle provided and shown that the class does work : https://jsfiddle.net/u1gpny6o/1/

All I have put in the hover class is a fill like so : 

.hover {
        fill:red;
    }

What is it you're trying to do ? Is it create a div with text ? If so create a div, give it the class you have in the question, and append text to that div, does that make sense ?

EDIT:

From your comments I have come up with this : https://jsfiddle.net/u1gpny6o/3/

From this question (not the selected answer but the second one) : Show data on mouseover of circle

I have made a tooltip div like so : 

var tooltip = d3.select("body")
    .append("div")
    .classed('hover', true)
    .style("position", "absolute")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("a simple tooltip");

So you can edit attributes in the css : 

.hover {
  background: #FFFFEF;
  width: 400px;
  height: 135px;
  padding: 10px;
  stroke: black;
  stroke-width: 2px;
}

And it will appear on mouseover, move on mousemove(to mouse coordinates, this can be edited) and disappear on mouseout : 

.on("mouseover", function(d) {
    tooltip.text(d.name)
       tooltip.style("visibility", "visible");
    })
    .on("mousemove", function() {
      return tooltip.style("top",
        (d3.event.pageY - 10) + "px").style("left", (d3.event.pageX + 10) + "px");
    })
    .on("mouseout", function() {
      return tooltip.style("visibility", "hidden");
    });

What you were doing previously made no sense. You had the class hover and you were duplicating attributes in the CSS, for example, setting color twice and so on. Also giving the elements attributes you can't give. For example, SVG elements can't have a border but can have a stroke and so on.

As you mentioned, you want to load the visualization in a pop up window. I would do it like so : 

function update(id, data){
var container = d3.select('#'+id) // then use this to append your vis to
. //the rest of the code the create the vis
.
.
.

}

And then when you hover over the node, just pass the id of the pop up to the update function along with the data (if need be) like so : 

update(popupid, data);
Community
  • 1
  • 1
thatOneGuy
  • 9,977
  • 7
  • 48
  • 90
  • Thanks for correcting me, I want to create rectangle with background color and border and display text in that, when mouse over. Can you let me know right syntax – Aman Apr 05 '16 at 22:10
  • Thanks a lot, exactly this is what I m looking for. Appreciate your help – Aman Apr 05 '16 at 23:38
  • Sure, one more thing, i want to display whole structure in the popup. how to do it – Aman Apr 06 '16 at 21:00
  • @Aman you will have to loop through the element, i.e loop through 'd', add to an array, add a line break then use this value. I have created a quick mock up, doesnt work very well but will explain what you need to do : https://jsfiddle.net/u1gpny6o/4/ on line 146-152 is where i have made the changes – thatOneGuy Apr 07 '16 at 08:34
  • I am not talking about tooltip. I want to display whole structure in popup on click of button. Right now it is rendering in body. var svg = d3.select("body").append("svg") – Aman Apr 07 '16 at 12:08
  • what do you mean by structure ? – thatOneGuy Apr 07 '16 at 12:10
  • means lets say i want to display whole UI in iframe – Aman Apr 07 '16 at 13:56
  • You will need to place all your code in a single function, probably with a parameter, say container. That way you can pass the function an id ( your container) which then appends a new visualization to that container. Im confused on why you would want this though – thatOneGuy Apr 07 '16 at 14:06
  • My application is developed using Extjs and the the UI i shared here is developed using D3. So to display in Extjs popup, I have to embed D3 UI in Extjs popup using popup id on click of button. – Aman Apr 07 '16 at 14:15
  • means in place of d3.select("body"), can i use any div id like d3.select("divId") – Aman Apr 07 '16 at 14:27
  • @Aman added to answer. If you just want a snapshot of the div and not to interact with it, I would look at the library 'canvg'. This converts svg to canvas image, that way you wont have to recreate all the time you just basically take a snapshot – thatOneGuy Apr 07 '16 at 15:13
  • No I don't want snapshot, i want interact one. Why we have to display it in "body", why can't we display it in specific iframe or div that already exist in html page. – Aman Apr 07 '16 at 15:20
0

It's not working likely because of the way you set up the hover class (doing text.hover) and how you are attaching it. Why not attach a mouseover listener to text and then assign the class:

Define your hover CSS class:

`.hover { ...styles ...}`

Use it on mouseover:

`select your text
 .on("mouseover", function() { 
   select text
   .classed("hover",true);
 });`

Then you can reverse it similarly with mouseout.

rby
  • 754
  • 6
  • 10