制作条形图时遇到问题 bar onClick create changes to scatter chart points using D3

Question

我正在并排创建两个图表（一个条形图和一个散点图），其中的数据点采用不同的图表形式。我正在尝试处理数据，以便当您单击条形图的一个条形时，一些散点图点会根据条件改变不透明度。

所以我有两个 JS 文件：

scatter.js处理点的散点图绘制：

  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 处理条形图的条形

  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);
});

有一段条形图 JS 代码，我在其中处理条形图的点击，我已经测试了不透明度效果并且它们有效但我的逻辑不正确，因为我是 javascript 的新手。

基本上，当我通过条形图单击某个条形时，会触发 onClick 函数并且我会收到控制台输出消息。但是，不透明度变化不会影响散点图。我假设这是因为不透明度检查永远不会通过代码重新运行。我应该将我的 svg.selectAll(".dot") 复制并粘贴到条形图的 onClick 函数中，还是有另一种方法来触发不透明度检查？我已经尝试复制和粘贴 svg.selectAll(".dot") 但没有任何反应。任何帮助将不胜感激，谢谢！

编辑：这是我的 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>

Answer 1

首先，由于您有两个由两个不同脚本制作的不同 SVG，因此它应该是 d3.selectAll，而不是 svg.selectAll。

除此之外，当您处理两个不同的数据集时，您将不得不使用不同的参数。像这样：

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

制作条形图时遇到问题 bar onClick create changes to scatter chart points using D3

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

javascript

svg

scatter-plot

bar-chart

d3.js