Javascript 为什么此标题图形不随World更新_Javascript_D3.js

Javascript 为什么此标题图形不随World更新

javascript d3.js

Javascript 为什么此标题图形不随World更新,javascript,d3.js,Javascript,D3.js,对于以下内容，我很高兴combobox默认为world，但是当一个收音机被点击时，我也希望标题移回“world”，我该怎么做呢我有这样的想法：代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>comboBoxWithRadios</title>

对于以下内容，我很高兴combobox默认为world，但是当一个收音机被点击时，我也希望标题移回“world”，我该怎么做呢

我有这样的想法：

代码如下：

<!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>


带收音机的组合箱
#投影菜单{
位置：绝对位置；
左：15px；
顶部：45px；
}
#组合选择{
位置：绝对位置；
左：15px；
顶部：95px；
}
XXX
YYY
ZZZ
d3.选择（“输入[值=\“YYY\”]”）属性（“选中”，为真）；
var exampleCV=“comboBoxWithRadios.csv”
选择数据集（）；
d3.选择全部（“输入”）
。打开（“更改”，选择数据集）；
函数selectDataset（）{
var v=该值；
如果（未定义==v）{
v=“YYY”
}
d3.csv（示例csv，函数（行）{
dta=行。过滤器（函数（行）{
如果（行['Category']==v）{
返回true；
}
});
//清除组合框
移除选项（document.getElementById（“投影菜单”）；
变量菜单=d3。选择（“投影菜单”）
.on（“变更”，addprodtil）；
console.log（d3.map）（dta，函数（d）{
返回d.国家；
}))
菜单。选择全部（“选项”）
.数据（d3.地图（dta，功能（d）{
返回d.国家；
}).keys（））
.输入（）
.附加（“期权”）
.属性（“选定”，功能（d）{
返回d==“世界”；
})
.文本（功能（d）{
返回d；
});
});
};
功能移除选项（选择框）{
var i；
对于（i=selectbox.options.length-1；i>=0；i--）{
选择框。删除（i）；
}
}
函数addProdTitl（）{
var combSel=该值；
//控制台日志（宽度）
如果（d3.select（“#prodTitle”）.empty（））{
var svg=d3.选择（“组合选择”）
.append（“svg”）
艾特先生({
“宽度”：“100%”，
“高度”：“70px”，
id:“产品名称”
});
}否则{
var svg=d3.选择（“prodTitle”）；
svg.selectAll（“*”）.remove（）；
}
var svgG=svg
.附加（“g”）
艾特先生({
“转换”：“转换（“+25+”，“+5+”），
“宽度”：“700px”，
“高度”：100，
id:“svgGxxx”
});
svgG
.append（“rect”）
艾特先生({
“转换”：“翻译（5,15）”，
x:30，
y:0，
“宽度”：“675”，
“高度”：“3”，
“填充”：“00a5b6”
})
.transition（）
.持续时间（1400）
艾特先生({
“转换”：“翻译（5,20）”
});
svgG
.append（“文本”）
.文本（combSel）
艾特先生({
“x”：60，
“y”：10，
“填充”：“00a5b6”
})
.transition（）
.持续时间（1400）
艾特先生({
“y”：15
});
};

我的解决方案包括将参数传递给函数

addprodtil

：

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:

添加到Gerardo Furtado的解决方案中以首次加载：

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