爲什麼這個標題圖形不會更新世界

對於以下我很高興，組合框是默認世界 - 但是當收音機被擊中，我也想要標題回到「世界」 - 我如何做這個？爲什麼這個標題圖形不會更新世界

我有這樣的普拉克：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>

來源

2016-12-07 whytheq

我的解決方案涉及到傳遞參數給函數addProdTitl：

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

所以，我們可以重寫功能如下：

這樣，每次你改變了廣播，只是做：

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

這裏是plunker：http://plnkr.co/edit/VvjHHp6KZrypwc9ApSPN?p=preview

來源

2016-12-07 14:57:35

nice one gerardo – whytheq

添加到赫拉爾多·費塔朵的解決方案來加載第一次：

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

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

來源

2016-12-07 15:25:08 mkaran

爲什麼這個標題圖形不會更新世界

回答

相關問題