Databases
StackOverflow2013
Postsdbo
POHow to change link color on mouseover event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to change link color on mouseover event
    primarykey
    data
    text
    <p>When I move mouse over the node then the color of the link should change. If I move mouse over the parent node then all child node link should change there link color and when I move the mouse over the child node then all it's child change there color please help me. I have the following code. Where should I have to change my code? What should I have to do? Or Is there any alter native for it? </p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html;charset=utf-8"&gt; &lt;style type="text/css"&gt; .node circle { cursor: pointer; stroke: #3182bd; stroke-width: .5px; } line.link { fill: none; stroke: #9ecae1; stroke-width: 1.5px; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="chart"&gt;&lt;/div&gt; &lt;script src="../d3/d3.v3.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var w = 960, h = 500, root; var force = d3.layout.force() .linkDistance(200) .charge(-500) //.gravity(-0.1) .size([w, h]); var vis = d3.select("#chart").append("svg:svg") .attr("width", w*2) .attr("height", h*2); d3.json("try.json", function(json) { root = json; function toggleAll(d) { if (d.children) d.children.forEach(toggleAll);click(d); } root.children.forEach(toggleAll); update(); }); function update() { var nodes = flatten(root), links = d3.layout.tree().links(nodes); root.fixed=true; root.x=w/2; root.y=h/2+100; // Restart the force layout. force .nodes(nodes) .links(links) .start(); // Update the links… var link = vis.selectAll("line.link") .data(links, function(d) { return d.target.id; }); // Enter any new links. link.enter().insert("svg:line", ".node") .attr("class", "link") .attr("x1", function(d) { return d.source.x+100; }) .attr("y1", function(d) { return d.source.y+100; }) .attr("x2", function(d) { return d.target.x+100; }) .attr("y2", function(d) { return d.target.y+100; }); // Exit any old links. link.exit().remove(); // Update the nodes… var node = vis.selectAll("g.node") .data(nodes, function(d) { return d.id; }) node.select("circle") .style("fill", color); // Enter any new nodes. var nodeEnter = node.enter().append("svg:g") .attr("class", "node") .attr("transform", function(d) { return "translate(" + d.x+100 + "," + d.y+100 + ")"; }) .on("click", click); nodeEnter.append("svg:circle") .attr("r", function(d) { return d.comp ? 70 : 35; }) .style("fill", color); nodeEnter.append("svg:text") .attr("text-anchor", "middle") .attr("dy", ".35em") .text(function(d) { return d.comp ? d.comp : d.class? d.class : d.patent; }); // Exit any old nodes. node.exit().remove(); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); }); } // Color leaf nodes orange, and packages white or blue. function color(d) { return d.comp ? "#3182bd": d._children ? "#c6dbef" : d.children ? "#3182bd" : "#fd8d3c"; } // Toggle children on click. function click(d) { if (d.children) { d._children = d.children; d.children = null; } else { d.children = d._children; d._children = null; } update(); } // Returns a list of all nodes under the root. function flatten(root) { var nodes = [], i = 0; function recurse(node) { if (node.children) node.children.forEach(recurse); if (!node.id) node.id = ++i; nodes.push(node); } recurse(root); return nodes; } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVividD
    1. UScoder
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POHow to change link color on mouseover event
      1. This table or related slice is empty.
      1. VTApproveEditSuggestion
    1. COfor chaning the color of link when mousehover occurs, you can use CSS styles. see here http://www.w3schools.com/css/css_link.asp
      singulars
      1. POHow to change link color on mouseover event
      1. USBabak Fakhriloo
    2. COit's not working.
      singulars
      1. POHow to change link color on mouseover event
      1. UScoder
    3. COif you have Chrome right click any where on page and select "Inspect Element" or if you have firefox use Firebug and see if there exists any error on Console tab ?
      singulars
      1. POHow to change link color on mouseover event
      1. USBabak Fakhriloo
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload