试图将两个函数合并为一个

时间：2018-01-23 04:50:52

标签： javascript html d3.js

我正在使用现有的代码：

https://plnkr.co/edit/HggGjgvTzggHPE6KYuOz?p=preview 

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>



  <style>
  .states {
      fill: none;
      stroke: #fff;
      stroke-linejoin: round;
    }

    .county:hover {
      fill: red !important;
    }
    /*

 .tooltiptext {

    visibility: hidden;

    width: 120px;

    background-color: #555;

    color: #fff;

    text-align: center;

    padding: 5px 0;

    border-radius: 6px;



    position: absolute;

    z-index: 1;

    bottom: 125%;

    left: 50%;

    margin-left: -60px;



      opacity: 0;

    transition: opacity 1s;

}

 .tooltiptext::after {

    content: "";

    position: absolute;

    top: 100%;

    left: 50%;

    margin-left: -5px;

    border-width: 5px;

    border-style: solid;

    border-color: #555 transparent transparent transparent;

}



svg:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

}

*/

    svg:hover {
      background: black;
    }
  }
  </style>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

  <script src="https://d3js.org/d3.v3.min.js"></script>

  <script src="https://d3js.org/queue.v1.min.js"></script>

  <script src="https://d3js.org/topojson.v1.min.js"></script>

</head>

<body>

  <div style="float:left,width:40%" id="click"></div>

  <!-- For Dropdown menu -->

  <select onchange="Dropdown(this.value)">

    <option>Unemployeement</option>

    <option>New File</option>

  </select>

  <script>
    $("div").click(function() {

      alert("here");

    });

    var width = 960,

      height = 500;



    var color = d3.scale.threshold()

    .domain([0.02, 0.04, 0.06, 0.08, 0.10])

    .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);



    var path = d3.geo.path();



    var svg = d3.select("div").append("svg")

    .attr("width", width)

    .attr("height", height);



    queue()

    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")

    .defer(d3.tsv, "unemployment.tsv")

    .await(ready);



    function ready(error, us, unemployment) {

      if (error) throw error;



      var rateById = {};



      unemployment.forEach(function(d) {
        rateById[d.id] = +d.rate;
      });



      svg.append("g")

      .attr("class", "counties")

      .selectAll("path")

      .data(topojson.feature(us, us.objects.counties).features)

      .enter().append("path")

      .attr("d", path)

      .attr("class", "county")

      .style("fill", function(d) {
        return color(rateById[d.id]);

      });

      svg.append("path")

      .datum(topojson.mesh(us, us.objects.states, function(a, b) {
        return a.id !== b.id;
      }))

      .attr("class", "states")

      .attr("d", path);

      var object = svg.append("foreignobject");

      var div = object.append("div");

      var tooltip = d3.select("div").append("span")

      .attr("class", "ccc")

      .style("z-index", "10")

      .style("visibility", "hidden")

      .style("position", "absolute")

      .style("text-align", "center")

      .style("width", "60px")

      .style("height", "28px")

      .style("padding", "2px")

      .style("font", "12px sans-serif")

      .style("background", "lightsteelblue")

      .style("border", "0px")

      .style("border-radius", "8px")

      .style("pointer-events", "none")

      .text("here");



      d3.select("div")

      .on("mouseover", function() {
        return tooltip.style("visibility", "visible");
      })

      .on("mousemove", function() {
        return tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
      })

      .on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      });

      $("span").click(function() {

        alert("The paragraph was clicked.");

      });

    }

    function newready(error, us, random) {

      if (error) throw error;



      var rateById = {};





      random.forEach(function(d) {
        rateById[d.id] = +d.rate;
      });



      svg.append("g")

      .attr("class", "counties")

      .selectAll("path")

      .data(topojson.feature(us, us.objects.counties).features)

      .enter().append("path")

      .attr("d", path)

      .attr("class", "county")

      .style("fill", function(d) {
        return color(rateById[d.id]);
      });

      svg.append("path")

      .datum(topojson.mesh(us, us.objects.states, function(a, b) {
        return a.id !== b.id;
      }))

      .attr("class", "states")

      .attr("d", path);

      var tooltip = d3.select("div").append("span")

      .attr("class", "ccc")

      .style("z-index", "10")

      .style("visibility", "hidden")

      .style("position", "absolute")

      .style("text-align", "center")

      .style("width", "60px")

      .style("height", "28px")

      .style("padding", "2px")

      .style("font", "12px sans-serif")

      .style("background", "lightsteelblue")

      .style("border", "0px")

      .style("border-radius", "8px")

      .style("pointer-events", "none")

      .text("here");



      d3.select("div")

      .on("mouseover", function() {
        return tooltip.style("visibility", "visible");
      })

      .on("mousemove", function() {
        return tooltip.style("top", (event.pageY - 10) + "px").style("left", (event.pageX + 10) + "px");
      })

      .on("mouseout", function() {
        return tooltip.style("visibility", "hidden");
      });



    }



    function Dropdown(val) {

      if (val == "Unemployeement") {

        queue()

        .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")

        .defer(d3.tsv, "unemployment.tsv")

        .await(ready);
      } else {

        queue()

        .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")

        .defer(d3.tsv, "random.tsv")

        .await(newready);

      }

    }





    /*

    var text1="Some Bullshit";









    //////// Edited For task 1

    var tooltip = 

       path.append("div")

        .style("z-index", "10")

        .style("visibility", "hidden")

        .style("position", "absolute")   

        .style("text-align","center")     

        .style("width","60px")          

        .style("height", "28px")         

        .style("padding","2px")       

        .style("font","12px sans-serif")    

        .style("background","lightsteelblue") 

        .style("border","0px")    

        .style("border-radius","8px")     

        .style("pointer-events","none") 

        .attr("class", "county")

      .text(text1);



    path



      .on("mouseover", function(){return tooltip.style("visibility", "visible");})

      .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})

      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});  

    ///////

















































    }



    */
  </script>

</body>



</html>)    

        .style("border-radius","8px")     

        .style("pointer-events","none") 

        .attr("class", "county")

      .text(text1);



    path



      .on("mouseover", function(){return tooltip.style("visibility", "visible");})

      .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})

      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});  

    ///////

















































    }



    */
  </script>

</body>



</html>

我没有受过3djs的训练。我想知道的是，是否有办法合并两个函数ready（）和newready（）。

目的是使用一个页面可以加载的文件堆栈。下拉列表使用所选选项中的数据重新加载地图。该选项表示文件夹中的文件。由于拆分功能，当前设置无意中仅限制了两个选项。

我该如何纠正这个？

2 个答案:

答案 0 :(得分：0)

请尝试https://plnkr.co/edit/8Io7rgSjYZSxi5fWTfpA?p=preview 

<!DOCTYPE html>

<html>
<meta charset="utf-8">

<head>
<style>
    .states {
      fill: none;
      stroke: #fff;
      stroke-linejoin: round;
    }
     .county:hover {
        fill: red !important;
      }
    svg:hover{
    background: black;
    }
    }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/queue.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
</head>

<body>
<div style="float:left,width:40%" id="click"></div>
<select onchange="Dropdown(this.value)">
  <option >Unemployeement</option>
  <option >New File</option>
</select>
<script>
    $("div").click(function(){
    alert("here");
    });

    var width = 960,
        height = 500;
    var color = d3.scale.threshold()
        .domain([0.02, 0.04, 0.06, 0.08, 0.10])
        .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);

    var path = d3.geo.path();
    var svg = d3.select("div").append("svg")
        .attr("width", width)
        .attr("height", height);
    queue()
       .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
        .defer(d3.tsv, "unemployment.tsv")
        .await(ready);

    function ready(error, us, unemployment) {
      if (error) throw error;
      var rateById = {};
      unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });
      svg.append("g")
          .attr("class", "counties")
        .selectAll("path")
          .data(topojson.feature(us, us.objects.counties).features)
        .enter().append("path")
          .attr("d", path)
            .attr("class", "county")
          .style("fill", function(d) { return color(rateById[d.id]);
          });    

      svg.append("path")
          .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))
          .attr("class", "states")
          .attr("d", path);

     var object=svg.append("foreignobject");
     var div=object.append("div");
     var tooltip=d3.select("div").append("span")
     .attr("class","ccc")
     .style("z-index", "10")

        .style("visibility", "hidden")

        .style("position", "absolute")   

        .style("text-align","center")     

        .style("width","60px")          

        .style("height", "28px")         

        .style("padding","2px")       

        .style("font","12px sans-serif")    

        .style("background","lightsteelblue") 

        .style("border","0px")    

        .style("border-radius","8px")     

        .style("pointer-events","none") 

     .text("here");



    d3.select("div") 
      .on("mouseover", function(){return tooltip.style("visibility", "visible");})
      .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
      .on("mouseout", function(){return tooltip.style("visibility", "hidden");});  

     $("span").click(function(){
        alert("The paragraph was clicked.");
    });
    }

    var dropdownMap = {
      'Unemployeement': 'unemployment.tsv' //Add more file as per need
    }

    function Dropdown(val){
      let file = dropdownMap[val];
      if(!file){
        file = 'random.tsv'
      }
        queue()
        .defer(d3.json,"https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")
        .defer(d3.tsv, file)
        .await(ready);
    }
    }

</script>

我使用了一个将下拉值映射到其文件的对象。 将来，如果您需要添加更多值，则只需添加下拉值和 它的文件名。 希望它有所帮助：）

答案 1 :(得分：-2)

创建连接两者的第三个函数，类似于方法（面向对象编程）

关于ES6 sintax 

var func1 = (options) => {
    //do something
}



func1.func2 = (options, data) => {
 //do the same, but a little bit more complex, or complement it

 func1() => {//i'm doing something more}
}
相关问题
最新问题