Having trouble making a bar chart bar onClick create changes to scatter chart points using D3

Question

I am creating two charts side by side (a bar chart and scatter plot chart) with data points just in different chart forms. I am trying to manipulate the data so that when you click on one bar of the bar chart, some scatter plot points change opacity based on a condition.

so I have two JS files:

scatter.js handles the scatter plot drawing of the dots:

  svg.selectAll(".dot")
      .data(newData)
    .enter().append("circle")
      .attr("class", "dot")
      .attr("r", function(d) { return (5 * parseFloat(d['Serving Size Weight'])); })
      .attr("cx", xMap)
      .attr("cy", yMap)
      .on("mouseover", function(d) {
          tooltip.transition()
               .duration(200)
               .style("opacity", .9);
          tooltip.html(d["Cereal Name"] + "<br/> (" + xValue(d) 
          + ", " + yValue(d) + ")")
               .style("left", (d3.event.pageX + 5) + "px")
               .style("top", (d3.event.pageY - 28) + "px");
      })
      .on("mouseout", function(d) {
          tooltip.transition()
               .duration(500)
               .style("opacity", 0);
      })
      .style("fill", function(d) { return color(cValue(d));})
      .style('opacity', 1)
      .transition()
      .delay(function(d,i) {return i * 100})   
      .style('opacity', function(d) {

        console.log("Manufacturer for Opacity: " + manufacturerForOpacity);

        if (manufacturerForOpacity == "") {
          manufacturertoIgnore = d.Manufacturer;
        } else {
          manufacturertoIgnore = manufacturerForOpacity;
        }

        if (d.Manufacturer != manufacturertoIgnore) {
          //console.log(d.Manufacturer);
          return 0.25;
        } else {

          return 1;
        }
      });

barchart.js handles the bars for the barchart

  var bars = g.selectAll(".bar")
    .data(data)   
    .enter().append("rect")
      .attr("class", "bar")
      .on("click", function(d) {
          //Change opacity of scatter plot circles that do not belong to the clicked manufacturer to 25%
          console.log("CLICK TO CHANGE SCATTER PLOT VALUES");
          manufacturerForOpacity = d.Manufacturer;
          console.log(manufacturerForOpacity);
      })
      .attr("x", function(d) { 
        return x(d.Manufacturer); 
      })
      .attr("y", function(d) { 
        for (var i = 0; i < 6; i++) {
          return y(0+10);
        }

      })
      .attr("width", x.bandwidth())
      .attr("height", function(d) { 
        return 20;
      });
    console.log(bars);
});

There is a section of the barchart JS code where I handle onclicks for the barchart and I have tested the opacity effects and they work but my logic is off as I am new to javascript.

Basically, when I click on a bar via the barchart, the onClick function gets triggered and I receive console output messages. However, the opacity changes are not being affected to the scatter plot. I assume that this is because the opacity check never gets re-ran through code. Should I copy and paste my svg.selectAll(".dot") into my onClick function for the barchart or is there another way to trigger the opacity check? I have already tried copying and pasting svg.selectAll(".dot") and nothing happens. Any help would be appreciated, thanks!

EDIT: Here is my index.html

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
  <!-- add stylesheets here-->
  <link href="css/basestyle.css" rel="stylesheet">
</head>

<body>

<!-- add js libraries here-->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!--script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script-->
<script src="js/lib/jquery-3.1.1.min.js"></script>
<script src="js/lib/jquery-ui.min.js"></script>

<!-- add divs here-->
<br>
<svg width="460" height="500"></svg>

<!-- add your script files here-->

<script src="js/barchart.js"></script>
<script src="js/scatter.js"></script>

</body>
</html>

Gerardo Furtado · Accepted Answer · 2017-04-06T03:18:48.733

1

First, since you have two different SVGs made by two different scripts, it should be d3.selectAll, not svg.selectAll.

Besides that, as you're dealing with two different data sets, you'll have to use different parameters. Something like this:

.on("click", function(d) {
    d3.selectAll(".dot").style("opacity", function(e){
        return e.Manufacturer === d.Manufacturer ? 1 : 0.25
    })
});

edited Apr 06 '17 at 03:18

answered Apr 06 '17 at 01:56

Gerardo Furtado

100,839
9
121
171

So I changed my barchart on click to be the above code that you suggested and there is no difference. I also printed out the selectAll command to a variable to see if there were scatter plot points being saved and there were so the line of code is properly retrieving the nodes but the opacities are not changing (still 1.0 when I inspect the element of a scatter plot point). Is it possible that there are previous nodes that need to be erased before these nodes are put on the screen? – dan139 Apr 06 '17 at 02:14
@dan139 I just saw that you used `style`, not `attr`, for setting the opacity. Please try the snippet using `style` (I just edited my answer). – Gerardo Furtado Apr 06 '17 at 03:20

Having trouble making a bar chart bar onClick create changes to scatter chart points using D3

1 Answers1