Question

对于以下内容我很高兴组合框默认为世界 - 但是当收音机被击中时，我也希望标题能够回到世界＆＃34; - 我该怎么做？

我有这个插件：http://plnkr.co/edit/9FXJXVqLZLPFdDrmVJez?p=preview

代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  <title>comboBoxWithRadios</title>
  <script src="https://d3js.org/d3.v3.js"></script>
  <style type="text/css">
    #projection-menu {
      position: absolute;
      left: 15px;
      top: 45px;
    }

    #comboSelection {
      position: absolute;
      left: 15px;
      top: 95px;
    }
  </style>
</head>

<body>
  <div id="radioDiv">
    <label>
      <input type="radio" name="dataset" id="dataset" value="XXX"> XXX</label>
    <label>
      <input type="radio" name="dataset" id="dataset" value="YYY" checked> YYY</label>
    <label>
      <input type="radio" name="dataset" id="dataset" value="ZZZ">ZZZ</label>
  </div>

  <div id="comboSelection"></div>

  <select id="projection-menu"></select>
  <script type="text/javascript">
    d3.select("input[value=\"YYY\"]").property("checked", true);
    var exampleCSV = "comboBoxWithRadios.csv"


    selectDataset();

    d3.selectAll("input")
      .on("change", selectDataset);

    function selectDataset() {

      var v = this.value;
      if (undefined == v) {
        v = "YYY"
      }

      d3.csv(exampleCSV, function(rows) {
        dta = rows.filter(function(row) {
          if (row['Category'] == v) {
            return true;
          }
        });

        //clear out the combobox
        removeOptions(document.getElementById("projection-menu"));

        var menu = d3.select("#projection-menu")
          .on("change", addProdTitl);
        console.log(d3.map(dta, function(d) {
          return d.country;
        }))
        menu.selectAll("option")
          .data(d3.map(dta, function(d) {
            return d.country;
          }).keys())
          .enter()
          .append("option")
          .property("selected", function(d) {
            return d === "world";
          })
          .text(function(d) {
            return d;
          });
      });
    };


    function removeOptions(selectbox) {
      var i;
      for (i = selectbox.options.length - 1; i >= 0; i--) {
        selectbox.remove(i);
      }
    }




    function addProdTitl() {

      var combSel = this.value;
      // console.log(width)

      if (d3.select("#prodTitle").empty()) {
        var svg = d3.select("#comboSelection")
          .append("svg")
          .attr({
            "width": "100%",
            "height": "70px",
            id: "prodTitle"
          });
      } else {
        var svg = d3.select("#prodTitle");
        svg.selectAll("*").remove();
      }

      var svgG = svg
        .append("g")
        .attr({
          "transform": "translate(" + 25 + "," + 5 + ")",
          "width": "700px",
          "height": 100,
          id: "svgGxxx"
        });

      svgG
        .append("rect")
        .attr({
          "transform": "translate(5,15)",
          x: 30,
          y: 0,
          "width": "675",
          "height": "3",
          "fill": "#00a5b6"
        })
        .transition()
        .duration(1400)
        .attr({
          "transform": "translate(5,20)"
        });

      svgG
        .append("text")
        .text(combSel)
        .attr({
          "x": 60,
          "y": 10,
          "fill": "#00a5b6"
        })
        .transition()
        .duration(1400)
        .attr({
          "y": 15
        });

    };
  </script>
</body>

</html>

Answer 1

我的解决方案涉及将参数传递给函数addProdTitl：

var menu = d3.select("#projection-menu")
    .on("change", function(){
        var thisvalue = this.value;
        addProdTitl(thisvalue);
    });

因此，我们可以将函数重写为：

function addProdTitl(thisvalue) {
    var combSel = thisvalue;
    //the rest of the function.

这样，每次更换收音机时，只需：

if (!d3.select("#prodTitle").empty()){
    addProdTitl("world");
}

以下是plunker：http://plnkr.co/edit/VvjHHp6KZrypwc9ApSPN?p=preview

Answer 2

首次加载Gerardo Furtado的解决方案：

// to initialize on first load
var e = document.getElementById( "projection-menu" );
addProdTitl(e.options[e.selectedIndex].value);

http://plnkr.co/edit/RezPI5iuuW84tlCLVB00?p=preview

为什么这个标题图形不会更新为World

2 个答案: