CODEWITHSUNDEEP
javascriptcsvd3.jslegend
R. Iskandar
R. Iskandar

Reputation: 39

Interactive Legend on force layout with d3.legend

I am looking to create an interactive legend. I'm working on a force directed graph that is being populated from a .csv file. I would like for the nodes to be highlighted when mouseover on the legend. I am using the d3.legend library that was created by Susie Lu for my legend.

I was also testing that whenever I hover on a node, other nodes with the same size will be highlighted. However, it is not working. I noticed examples were previously given by Mike Bostock such as this //bl.ocks.org/mbostock/3087986 .I have also referred to Mike Bostok's answer to a similar question stackoverflow.com/questions/11206015/clicking-a-node-in-d3-from-a-button-outside-the-svg/11211391#11211391 but to no success. Ulitmately I would like my Force Layout to look something like this bl.ocks.org/Guerino1/raw/2879486/ Can anyone kindly point out my noob mistake?

        var node = svg.selectAll(".node")
      .data(graph.nodes)
    .enter().append("g")
      .attr("r", function(d) { return d.size; })
       .attr("class", function(d) { return "node " + d.size; })
      .style("fill", function (d) { return color(d.group); })
      .on("mouseover", function(d) { highlight(d.size); });

            node.append("circle")
                    .style("fill", function(d) { return color(d.group); })
                    .attr("r",function(d) { return d.size; });

function highlight(type) {
   if (type == null) d3.selectAll(".node").classed("active", false);
   else d3.selectAll(".node." + type).classed("active", true);
}

Please refer to http://jsfiddle.net/rajaiskandar/os8622yb/ on the full coding. Is there any way for me to upload my .csv file to jsfiddle? I have customised the les_mis.csv .

This is what it currently looks like

print screen of the force layout

Thank you in advance

Upvotes: 1

Views: 2217

Answers (2)

Mar
Mar

Reputation: 142

At least one of the problems is that CSS classes can't start with digits (in your case, 5, 10, 15, etc. are class names for the groups that contain the circles). See the CSS specification.

Here's the specific cite:

In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".

Another problem is that (presumably) you want to be targeting the circles themselves and not the whole group, which has the class .node.15. Suppose you changed the digit classes to start with an underscore. Then d3.selectAll(".node._15") would target all groups with circles of size 15. You could then target the circles by replacing the second line in your highlight function by something like:

d3.selectAll(".node._" + type.size + ">circle")

The last thing (I think) is that because of CSS specificity, targeting the items with a the class .node.active will not overwrite the styling that has been added to the elements directly in the html. Replacing "style" by "attr" when you define the fill color of the svg elements should fix this.

Does this work? http://plnkr.co/edit/6E0fkDWS87jYi4zbyPnd?p=preview

Upvotes: 1

seb
seb

Reputation: 2311

If you analyze your code with a developer tool, such as firebug, you will get this error message when you hover over one of your nodes:

Uncaught SyntaxError: Failed to execute 'querySelectorAll' on 'Document': '.node.5' is not a valid selector.

The circles don't have the correct css classes.

Also, you are passing something that is not defined into your highlight function. Try using highlight(d) instead of highlight(d.size).

Upvotes: 0

Related Questions