单击时如何使某些元素突出显示？

debugcn 发表于 Dev

命运审判

我正在构建一个显示各种条形图的图形，每个条形都有自己的特定数据。条形是用颜色编码的，并且有一个图例显示颜色的含义。当您单击图例上的圆圈之一时，我正在尝试做的事情使图形上具有相应颜色的条突出显示。

<!DOCTYPE html>
<html>
<head>
  <meta>
  <meta name="description" content="Bar Graph Showing the Amount of Resources Being Used per Project " />
  <meta charset="utf-8">
  <title>Resources per Program</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

  <style type="text/css">
    h1 {
      font-size: 35px;
      color: darkblue;
      font-family: Helvetica;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }
    
    h2 {
      font-size: 20px;
      color: darkred;
      font-family: Helvetica;
      margin-left: 900px;
      margin-top: -40px; 
      margin-bottom: 70px
    }

    h3 {
      font-size: 13px;
      color: red;
      font-weight: bold;
    }

    .label {
      font-size: 20px;
      color: darkgrey;
      font-family: sans-serif;
      border-bottom-width: 3px;
      border-bottom-style: dashed;
      border-bottom-color: black;
    }

    body {
      background: linear-gradient(white, #a6a6a6);
    }

    .legend {
      font-family: sans-serif;
      font-size: 17px; 
      font-weight: normal; 

    }   

  </style>
</head>

<body>
  <h1>Resources used per Program</h1>

  <p>Choose Month:
    <select id="label-option">
      <option value="April">April</option>
      <option value="May">May</option>
      <option value="June">June</option>
      <option value="July">July</option>
      <option value="August">August</option>
      <option value="September">September</option>
    </select>
  </p>
  <h3>*Hold down the Selector and Drag onto Desired Option* (Touch Screen Users)</h3>

    <script type="text/javascript">
      var width = 1700
      var height = 500
      var emptyVar = 0
      var dataArrayProjects = ['2G', 'AB', 'BC', 'CD', 'DE', 'EF', 'FG', 'GH']
      var April = [2.5, 2.1, 1.3, 15.2, 1, 4, 1, 4]
      var May = [2.5, 2.1, 1, 14.8, 1, 4, 2, 6]
      var June = [2.5, 2.1, 1, 14.8, 1, 4, 2, 6]
      var July = [2.5, 3.4, 2, 14.8, 1, 3.5, 2.5, 6]
      var August = [2.5, 3.4, 2.5, 14.8, 1.2, 3.5, 2.15, 6]
      var September = [2.5, 3, 2, 13.5, 1, 3.5, 2.5, 6]

      d3.select("#label-option").on("change", change)

      function change() {
        var data = April;
        if (this.selectedIndex == 1){
          data = May;
        } else if (this.selectedIndex == 2){
          data = June;
        } else if (this.selectedIndex == 3){
          data = July;
        } else if (this.selectedIndex == 4){
          data = August;
        } else if (this.selectedIndex == 5){
          data = September;
        }
        canvas.selectAll("rect")
        .data(data)
        .attr("width", emptyVar)
        .attr("height", 50)
        .attr("fill", function(d, i) {
          return color[i%8] 
        })
        .attr("y", function(d, i) {
          return i * 55
        })

       bars.transition()
        .duration(1500)
        .delay(200)
        .attr("width", function(d) {
          return widthScale(d);
        });

        texts = canvas.selectAll(".label")
        .data(data)
        .attr("x", function(d) {
          return widthScale(d) + 10;
        })
        .attr("fill", function(d, i) {
          return color[i%8] 
        })
        .attr("y", function(d, i) {
          return (i * 55) + 25
        })
        .style("opacity", 0)
        .text(function(d, i) {
          return d;
        }) 

        texts.transition()
        .duration(1800)
        .delay(180)
        .style("opacity", 1)  
      }

      var widthScale = d3.scale.linear()
        .domain([0, 16])
        .range([0, width - 60]);

      var heightScale = d3.scale.ordinal()
        .domain(dataArrayProjects)
        .rangePoints([10, height - 85]);

      var color = ["#1F45FC", "#87AFC7", "#87AFC7", "#151B54", "#1F45FC", "#151B54", "#1F45FC", "#151B54"]

      var xAxis = d3.svg.axis()
        .ticks("20")
        .scale(widthScale);

      var yAxis = d3.svg.axis()
        .scale(heightScale)
        .orient("left");

      var canvas = d3.select("body")
        .append("svg")
        .attr("width", width + 250)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(130, 0)");

      var bars = canvas.selectAll("rect")
          .data(April)
          .enter()
          .append("rect")
          .attr("width", emptyVar)
          .attr("height", 50)
          .attr("fill", function(d, i) {
            return color[i%8] 
          })
          .attr("y", function(d, i) {
            return i * 55
          })

      var texts = canvas.selectAll(".label")
          .data(April)
           .enter()
            .append("text")
            .attr("class", "label")
            .attr("x", function(d) {
              return widthScale(d) + 10;
            })
            .attr("fill", function(d, i) {
              return color[i%8] 
            })
            .attr("y", function(d, i) {
              return (i * 55) + 25
            })
            .text(function(d, i) {
              return d;
            })
            .style("opacity", 0)

      canvas.append("g")
        .attr("transform", "translate(0, 430)")
        .attr("font-family", "Helvetica")
        .attr("font-size", "15px")
        .call(xAxis);

      canvas.append("g")
        .attr("font-family", "Helvetica")
        .attr("font-size", "15px")
        .style("fill", "black")
        .attr("class", "y axis")
        .call(yAxis);

      bars.transition()
        .duration(1500)
        .delay(200)
        .attr("width", function(d) {
          return widthScale(d);
        })

      texts.transition()
        .duration(1800)
        .delay(180)
        .style("opacity", 1)

      var yAxisLine = canvas.append("line")
                        .attr("x1", -3)
                        .attr("y1", 0)
                        .attr("x2", -3)
                        .attr("y2", 436)
                        .attr("stroke-width", 6)
                        .attr("stroke", "black");

      var legend = canvas.append("g")
            .attr("class", "legend")
            .attr("width", 450)
            .attr("height", 300)
            .attr("x", 1000)
            .attr("y", 0)

      legend.append("text")
              .text("All Projects")
              .attr("fill", "black")
              .attr("stroke-width", 1)
              .attr("x", 1300)
              .attr("y", 20)
      legend.append("text")
              .text("All Core Capabilities")
              .attr("fill", "black")
              .attr("stroke-width", 1)
              .attr("x", 1300)
              .attr("y", 50)
      legend.append("text")
              .text("Projects and Core Capabilities")
              .attr("fill", "black")
              .attr("stroke-width", 1)
              .attr("x", 1300)
              .attr("y", 80)

      legend.append("circle")
              .attr("r", 8)
              .attr("fill", "#1F45FC")
              .attr("cx", 1275)
              .attr("cy", 14.5)
      legend.append("circle")
              .attr("r", 8)
              .attr("fill", "#87AFC7")
              .attr("cx", 1275)
              .attr("cy", 44.5)
      legend.append("circle")
            .attr("r", 8)
            .attr("fill", "#151B54")
            .attr("cx", 1275)
            .attr("cy", 74.5)

    </script>
    <h2>Resources</h2>  
</body>
</html>

对不起，它的宽度非常大，适合安装在我正在使用的大型触摸屏上。

我要问的是，当您单击图例中的一个圆圈时，该圆圈的所有颜色都与该圆圈相同的颜色会突出显示（如笔画中的不是整个线条），我该如何做。

先感谢您！

杰拉尔多·富塔多

选择相应的条形有点困难，因为现在条形的颜色不依赖于任何数据，它们是由索引分配的：

.attr("fill", function(d, i) {
        return color[i%8] 
      })

如果颜色是由数据设置的（那是最好的方法...），那将仅仅是设置一个类并按该类突出显示它们的问题。

但是有一种方法可以选择所有颜色与单击的圆圈相同的条形：我们可以选择所有条形，然后按属性过滤选择：

.on("click", function(){
            var rects = d3.selectAll("rect").filter(function(){
            return this.attributes.fill.nodeValue == "#1F45FC";
            });
 });

这是小提琴：https : //jsfiddle.net/gerardofurtado/z3y0fk74/（我没有使用SO代码段，因为条太长了）

单击圆，颜色相同的条将有一个黑色笔划（宽度2）。再次单击它，然后删除笔划。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。