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代码中有一部分用于处理条形图的onclicks，我测试了不透明度效果，但是我的逻辑是关闭的，因为我是javascript的新手。

基本上，当我通过条形图点击一个栏时，onClick功能会被触发，我会收到控制台输出信息。但是，不透明度变化不会受到散点图的影响。我认为这是因为不透明度检查永远不会通过代码重新运行。我应该将我的svg.selectAll（＆＃34; .dot＆＃34;）复制并粘贴到条形图的onClick函数中，还是有其他方法来触发不透明度检查？我已经尝试过复制和粘贴svg.selectAll（＆＃34; .dot＆＃34;）但没有任何反应。任何帮助将不胜感激，谢谢！

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

无法在条形图栏上点击创建更改以使用D3

1 个答案: