2

how can I make d3 force layout title bigger ? I want the text that is shown on mouse over bigger. I have tried this:

  node.enter().append("circle")
  .attr("class", "node")
  .attr("cx", function(d) { return d.x; })
  .attr("cy", function(d) { return d.y; })
  .attr("r", function(d) { return root.name === d.name ? 10: Math.sqrt(d.size) / 10 || 4.5; })
  .style("fill", color)
  .on("click", click)
  .call(force.drag)
  .append("title")
  .text(function(d){
  return d.name + " " + d.id;
  })
  .style('font-size', '200%');

but the text size if not changing even if it is well set in DOM:

<circle class="node" cx="491.55891560465125" cy="334.31399656562644" r="4.5" style="fill: rgb(198, 219, 239);"><title style="font-size: 200%;">myname 27</title></circle>

You can see and example here. When the mouse hover a node, it shows a small text. I want it to be bigger. can you please help ?

dmx
  • 1,862
  • 3
  • 26
  • 48
  • From my understanding, you can't style title elements. It's up to the browser to render it. [See here.](https://developer.mozilla.org/en/docs/Web/SVG/Element/title). You'll need to create your own tooltip element within the svg and then style it with CSS. – Monica Olejniczak Dec 03 '16 at 10:20

0 Answers0