在制作条形图 bar onClick 时遇到问题，使用 D3 创建对散点图点的更改答案

【问题标题】：Having trouble making a bar chart bar onClick create changes to scatter chart points using D3在制作条形图 bar onClick 时遇到问题，使用 D3 创建对散点图点的更改
【发布时间】：2017-04-06 01:29:30
【问题描述】：

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

所以我有两个 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 代码，我在其中处理条形图的 onclicks，我已经测试了不透明度效果并且它们有效，但我的逻辑是关闭的，因为我是 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>

【问题讨论】：

标签： javascript d3.js svg bar-chart scatter-plot

【解决方案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
    })
});

【讨论】：

所以我将点击时的条形图更改为您建议的上述代码，没有区别。我还将 selectAll 命令打印到一个变量中，以查看是否保存了散点图点，因此代码行正在正确检索节点，但不透明度没有改变（当我检查散点图的元素时仍然是 1.0情节点）。是否有可能在这些节点被放到屏幕上之前需要擦除之前的节点？
@dan139 我刚刚看到您使用style，而不是attr 来设置不透明度。请使用style 尝试 sn-p（我刚刚编辑了我的答案）。