0

Following up from line break for d3 circle title tooltipText

the code is

svgContainer.selectAll("g.node").each(function() {
 var node = d3.select(this);
 var tooltipText = node.attr("name");
 var tooltipText = node.attr("name").replace("\\n", "<br />"); 
 if (tooltipText) {
   node.select("circle")
     .attr("data-html", "true")
     .attr("title", tooltipText);
 }

and I'd like to replace the .attr("data-html", "true") function with CSS formatting

css, not-working-1: 

# g.node circle { data-html: true;}

css, not-working-2: 

# g.node circle { html: true;}

both above 2 have "Unknown property name" error.

I'm wondering, what is the CSS equivalent to .attr("data-html", "true")?

Thank you very much.

Community
  • 1
  • 1
keypoint
  • 2,268
  • 4
  • 31
  • 59

2 Answers2

5

CSS is (designed for) a simple mechanism for adding style to an HTML document.

The code you referred to actually mutates the DOM (in this case, the html-node).

On a side note: If you want to 'select' based upon that state in CSS, you could do. 

html {
  background: red;
}

html[data-something=true] {
  background: green;
}

if then the JavaScript sets $('html').attr('data-something', 'true'); your CSS would be applied (from red background to green).

Angelo Michel
  • 265
  • 1
  • 5
0

It doesn't have equivalent CSS property. CSS is the look and some behavior. data-html is an HTML5 styled attribute, which is used to store a data. You can add anything with data- prefix.

So you need to use a Javascript to add an HTML5 attribute.

Suren Srapyan
  • 66,568
  • 14
  • 114
  • 112