d3点击事件互动

Question

I have a map with d3 circles showing the site locations, as well as a linechart showing the time trend for each of the site. I am trying to make a particular line highlight when a corresponding circle is clicked. Here is the code. I can't seem to connect the siteIDs with the following function:

function highlightLine(id) {
        lineGroup.classed("g-highlight", function(d) {
          return d.siteID == id.siteID;
        });
};

Answer 1

Insert a console.log as shown below, and it should become clearer:

function highlightLine(id) {
    lineGroup.classed("g-highlight", function(d) {
      console.log(d);
      return d.siteID == id.siteID;
    });
};

Because you're binding to data that you've run through d3.nest , the id of d that you're interested in is actually d.key not d.siteID , which does not exist on that level. So the boolean inside classed should be

return d.key == id.siteID

That will cause the appropriate trendline's <g> to have a "g-highlight" class, however it still will not visibly color the line. I believe that's because your css rule .g-highlight { stroke:... } applies the stroke to the containing <g> instead of the <path> inside it. You can change that css rule to be .g-highlight path { ... } and that will color the path as you'd like.

Answer 2

To bind the click event in d3 you should select the object with that class and bind the click:

d3.selectAll(".g-highlight").on("click", function(d) {
    return d.siteID == id.siteID;
 });