使用可视化的变体更新或删除d3.slider

时间：2016-01-07 14:17:05

标签： javascript jquery d3.js

我希望随着时间的推移可视化地图上的数据。因此，我有两个函数，它们在一天内绘制点并在一天过后自行移除

var showOne = function (){
  var slider = d3.slider()
      .axis(true).min(minDate).max(maxDate)
      .on("slide", function(evt, value) {
        sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
        newDataS = site_dataS.features.filter(function(d){
          dataDate = d.properties.Date;
          if (dataDate == sliderDate) {
            return dpS(dataDate);
          }
        });
        displaySitesS(newDataS);
      })

  d3.select('#slider3').call(slider);

}

我有这个功能，可以随时间显示事件

var showTwo = function (){
  d3.select('#slider3').call(d3.slider()
    .axis(true).min(minDate).max(maxDate)
    .on("slide", function(evt, value) {
      sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
      newDataS = site_dataS.features.filter(function(d){
        return dpS(d.properties.Date) < new Date(value);

      });

      displaySitesS(newDataS);
    })
  );
}

我想用按钮更新滑块

＆＃13;
＆＃13; 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/d3.slider.css" />
<link rel="stylesheet" href="css/temp.css" />
<link rel="stylesheet" href="css/main.css" />
<script type="text/javascript" src="library/d3.v3.min.js"></script>
<script type="text/javascript" src="library/topojson.v1.min.js"></script>
<script type="text/javascript" src="library/underscore-min.js"></script>
<script type="text/javascript" src="library/d3.slider.js"></script>
<script type="text/javascript" src="library/socket.io-0.9.10.min.js"></script>
<script type="text/javascript" src="library/caress-0.1.0.js"></script>
<script type="text/javascript" src="library/jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="library/d3.tip.js"></script>
<script type="text/javascript" src="library/moment.min.js"></script>

<script src="https://riccardoscalco.github.io/textures/textures.min.js" charset="utf-8"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
</head>

<body>

  <!-- <script>
    $(function() {
        window.client = new Caress.Client({
            host: 'localhost',
            port: 5000
        });
        client.connect();
    });
  </script> -->
<div id="slider3"></div>
<script type="text/javascript" src="js/04map.js"></script>



<div class="chart"></div>
<!-- <script type="text/javascript" src="js/streamgraphTexture.js"></script> -->
<button>Zeige alle</button>
<script>
showOne();
$(document).ready(function(){
    $("button").click(showTwo);
});
</script>


</body>
＆＃13;
＆＃13;
＆＃13;

但另一个滑块添加在旧滑块的正下方。您是否有一些想法如何更新滑块，以便它可用于其他可视化？所有数据均为here

Error

EDIT1：

var width = 1020,
    height = 500;
var projection = d3.geo.mercator()
    .translate([width / 2, height / 2])
    .scale((width - 1) / 2 / Math.PI);

var zoom = d3.behavior.zoom()
    .scaleExtent([3, 200])
    .on("zoom", zoomed);

var path = d3.geo.path()
    .projection(projection);

var tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(function(d) { return d.properties.description })
  .offset([0, 3]);



var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g");
svg.call(tip)

var g = svg.append("g");
var sites = svg.append("g");
var graph = svg.append("g");

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("opacity", 0);

svg.call(zoom)
    .call(zoom.event);

d3.json("mapdata/worldfill.json", function(error, world) {
  if (error) throw error;
  var countries = topojson.feature(world, world.objects.countries_fill).features;

  g.append("path")
      .datum({type: "Sphere"})
      .attr("class", "sphere")
      .attr("d", path);

  g.append("path")
      .datum(topojson.merge(world, world.objects.countries_fill.geometries))
      .attr("class", "land")
      .attr("d", path);

  g.append("path")
      .datum(topojson.mesh(world, world.objects.countries_fill, function(a, b) { return a !== b; }))
      .attr("class", "boundary")
      .attr("d", path);
//_______________________________________________________________________________________________________________________________________
//________________________________________________________________________________________________________________________________________


  d3.json("mapdata/germany.json", function(error, ger){
    if (error) throw error;
    var states = topojson.feature(ger, ger.objects.states_germany),
        cities = topojson.feature(ger, ger.objects.cities_germany);

    g.selectAll(".states")
        .data(states.features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("class", function(d) { return "state " + d.id; })
        .attr("d", path)
        .style("fill", function(d) {
          return z(d.id);
        });
    g.append("path")
        .datum(cities)
        .attr("d", path.pointRadius('0.35'))
        .style("opacity", 0.5)
        .style("fill", "blue")
        .attr("class", "city");


      g.selectAll(".german-place-label")
          .data(cities.features)
          .enter().append("text")
          .attr("class", "place-label")
          .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
          .attr("dy", ".35em")
          .text(function(d) { return d.properties.name; });
  });

  d3.json("mapdata/syria.json", function(error, syr){
    if (error) throw error;
    var states = topojson.feature(syr, syr.objects.states_syria),
        cities = topojson.feature(syr, syr.objects.cities_syria);

    g.selectAll(".states")
        .data(states.features)
        .enter()
        .append("path")
        .attr("class", "state")
        .attr("class", function(d) { return "state " + d.id; })
        .attr("d", path)
        .style("fill", "orange");
    // g.append("path")
    //     .datum(cities)
    //     .attr("d", path.pointRadius('0.15'))
    //     .attr("class", "city");

    // g.selectAll(".syrian-place-label")
    //     .data(cities.features)
    //     .enter().append("text")
    //     .attr("class", "place-label")
    //     .attr("transform", function(d) { return "translate(" + projection(d.geometry.coordinates) + ")"; })
    //     .attr("dy", ".35em")
    //     .text(function(d) { return d.properties.name; });

  });

});

function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  //console.log(sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"));
}


d3.json("data/vorfaelle.json", function(error, data){
    window.site_dataG = data;
});
d3.json("data/syria05.json", function(error, data){
    window.site_dataS = data;
});

d3.json("data/deathineurope.json", function(error, data){
    window.site_dataW = data;
});

d3.json("data/isil.en.json", function(error, data){
    window.site_dataB = data;
    console.log("Loaded");
});




var displaySitesG = function(data) {
  var sitedata = sites.selectAll(".siteG")
      .data(data);

  sitedata
      .enter()
      .append("circle")
      .attr("class", "siteG")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .on("click", tip.show)
      .on('mouseout', tip.hide)
      .attr("r", 1.25)
      .transition().duration(70)
      .attr("r", 5);
      // .on("mouseover", tip.show);
      // .on("mouseover", function(d) {
      //       div.transition()
      //           .duration(200)
      //           .style("opacity", 0.9);
      //       // div.html("Test")
      //           // .style("left", (d3.event.pageX) + "px")
      //           // .style("top", (d3.event.pageY - 28) + "px");
      //       })
        // .on("mouseout", function(d) {
        //     div.transition()
        //         .duration(500)
        //         .style("opacity", 0);
        // });


    sitedata.exit()//remove the selection which are to be removed from dataset
      //.transition().duration(200)
        .attr("r",0)
        .remove();

};

var displaySitesS = function(data) {
  var radScale = d3.scale.linear()
    // .domain([0,d3.max(data, function (d) {
    //   return d.properties.Value
    // })])
    .domain(d3.extent(data, function(d){
      return d.properties.Value
    }))
    .range([0.1,.5]);
  var siteDataS = sites.selectAll(".siteS")
      .data(data);
  siteDataS
      .enter()
      .append("circle")
      .attr("class", "siteS")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", function(d){
        return 1.75 * radScale(d.properties.Value)
      })
      .transition().duration(70)
      .attr("r", function(d){
        return radScale(d.properties.Value)
      });

    siteDataS.exit()//remove the selection which are to be removed from dataset
        .transition().duration(10)
        .attr("r",0)
        .remove();

};


var displaySitesW = function(data) {


  var siteDataW = sites.selectAll(".siteW")
      .data(data);


  siteDataW
      .enter()
      .append("circle")
      .attr("class", "siteW")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", 10)
      .transition().duration(70)
      .attr("r", 20);

    siteDataW.exit()//remove the selection which are to be removed from dataset
        .transition().duration(500).delay(1000)
        .attr("r",0)
        .style("opacity", 0.5)
        .remove();

};

var displaySitesB = function(data) {

  var radScale = d3.scale.linear()
    // .domain([0,d3.max(data, function (d) {
    //   return d.properties.Value
    // })])
    .domain(d3.extent(data, function(d){
      return d.properties.attacks
    }))
    .range([1,4]);

  var siteDataB = sites.selectAll(".siteB")
      .data(data);
  siteDataB
      .enter()
      .append("circle")
      .attr("class", "siteB")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", 2)
      .transition().duration(70)
      .attr("r", function(d){
        return radScale(d.properties.attacks)
      });
    siteDataB.exit()//remove the selection which are to be removed from dataset
        .transition().duration(500)
        .attr("r",0)
        .style("opacity", 0.5)
        .remove();
};


dpG = d3.time.format("%d.%m.%Y").parse;
dpS = d3.time.format("%Y-%m-%d").parse;
var minDate = dpG("01.01.2015");
var maxDate = dpG("31.12.2015");
var secondsInDay = 60 * 60 * 24;


var slider = d3.slider()
    .axis(true).min(minDate).max(maxDate)
    .on("slide", function(evt, value) {
      sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");

      newDataS = site_dataS.features.filter(function(d){
        dataDate = d.properties.Date;
        if (dataDate == sliderDate) {
          return dpS(dataDate);
        }
      });
      displaySitesS(newDataS);
    })
    d3.select('#slider3').call(slider);

var showOne = function (){
    slider = d3.slider()
      .axis(true).min(minDate).max(maxDate)
      .on("slide", function(evt, value) {
        sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");

        newDataS = site_dataS.features.filter(function(d){
          dataDate = d.properties.Date;
          if (dataDate == sliderDate) {
            return dpS(dataDate);
          }
        });
//______________________________________________________________________________
//______________________________________________________________________________

        // newdataW =  site_dataW.features.filter(function(d){
        //   dataDate = d.properties.date;
        //   if (dataDate == sliderDate) {
        //     //console.log(dpS(dataDate));
        //     //console.log(dpS(dataDate));
        //     return dpS(dataDate);
        //   }
        // });
//______________________________________________________________________________
//______________________________________________________________________________
        //
        // newdataB =  site_dataB.features.filter(function(d){
        //   dataDate = d.properties.date;
        //   if (dataDate == sliderDate) {
        //     //console.log(dpS(dataDate));
        //     //console.log(dpS(dataDate));
        //     return dpS(dataDate);
        //   }
        // });

//______________________________________________________________________________
//______________________________________________________________________________

        displaySitesS(newDataS);
        //displaySitesW(newdataW);
        //displaySitesB(newdataB);
      })

  d3.select('#slider3').call(slider);

}

var showTwo = function (){
  console.log("ShowTwoNow");
  d3.select('#slider3').remove(slider);

  slider = d3.slider()
    //.axis(true).min(minDate).max(maxDate)
    .on("slide", function(evt, value) {
      sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
      newDataS = site_dataS.features.filter(function(d){
        return dpS(d.properties.Date) < new Date(value);

      });

      displaySitesS(newDataS);

    })
    d3.select('#slider3').call(slider);

}

我可能会删除滑块，但当然也删除了DOM元素。但是，如果我无法更新它，如何使用新的过滤器函数调用另一个滑块？

1 个答案:

答案 0 :(得分：0)

我现在调用滑块一次，但在滑块内我让一个变量决定它应该使用哪个过滤器功能。整个代码看起来像这样

   // var siteDataW,
    //     siteDataS,
    //     siteDataG;


var tip = d3.tip()
  .attr('class', 'd3-tip')
  .html(function(d) { return d.properties.description })
  .offset([0, 3]);
svg.call(tip)


function zoomed() {
  g.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  sites.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
  var translate = zoom.translate();
  var translateX = translate[0]/zoom.scale();
  var translateY = translate[1]/zoom.scale();
  // console.log(translate[0]/zoom.scale() + "   " + translate[1]/zoom.scale());
  // console.log(zoom.scale());

  if (zoom.scale()<minZoomTresholdCountry) {
    //console.log("WELT");
    zoomCheck = 0;
    // if( siteDataG ){
    //   siteDateG.remove();
    // }
    // if(siteDataS){
    //   siteDataS.remove();
    // }
  }
  else if(zoom.scale() >= minZoomTresholdCountry
    && translateX< minXG && translateX > maxXG
    && translateY<minYG && translateY>maxYG){
      //console.log("DE");
      zoomCheck = 1;
  }
  else if(zoom.scale() >= minZoomTresholdCountry
    && translateX> minXS && translateX < maxXS
    && translateY<minYS && translateY>maxYS){
      //console.log("SYR");
      zoomCheck = 2;
  }
  else{
    zoomCheck = 0;
  }
  console.log(zoomCheck)
}


d3.json("data/vorfaelle.json", function(error, data){
    window.site_dataG = data;
});
d3.json("data/syria05.json", function(error, data){
    window.site_dataS = data;
});

d3.json("data/deathineurope.json", function(error, data){
    window.site_dataW = data;
});

d3.json("data/isil.en.json", function(error, data){
    window.site_dataB = data;
});

dpG = d3.time.format("%d.%m.%Y").parse;
dpS = d3.time.format("%Y-%m-%d").parse;
dpS = function(){
  d3.time.parse;
}
dpsTimestamp = +dpS;

var minDate = dpG("01.01.2015");
var maxDate = dpG("31.12.2015");

var slider = d3.slider()
    .axis(true).min(minDate).max(maxDate).step(60 * 60 * 24)
    .on("slide", function(evt, value) {
      sliderDate = moment(value,"x").utc().format("YYYY-MM-DD");
      console.log(sliderDate);
      if( filterCheck == 0 ){

        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){
            dataDate = d.properties.date;
            if (dataDate == sliderDate) {
              return dpS(dataDate);
            }
          });

          showWorldSite(newDataW)

        }

        else if( zoomCheck == 1 ){
        sliderDate = moment(value,"x").utc().format("MM.DD.YYYY");

          newDataG = site_dataG.features.filter(function(d){
            dataDate = d.properties.date;
            if (dataDate == sliderDate) {
              console.log(dpG(dataDate))
              return dpG(dataDate)
            }
          })
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            dataDate = d.properties.Date;
            if (dataDate == sliderDate) {
              return dpS(dataDate);
            }
          });

          showSyrianSite(newDataS);
        }

      }
//================================================================================================
//================================================================================================
//================================================================================================

      else if( filterCheck == 1 ) {

        if( zoomCheck == 0 ){

          newDataW = site_dataW.features.filter(function(d){
            return dpS(d.properties.date) < new Date(value);
          });

          showWorldSite(newDataW)

        }

        else if( zoomCheck == 1 ){

          newDataG = site_dataG.features.filter(function(d){
            dataDate = d.properties.Date;
            return dpS(dataDate) < dpS(sliderDate);
          })
          console.log(newDataG.length);
          console.log(new Date(value));
          showGermanSite(newDataG);
        }

        else if( zoomCheck == 2 ){

          newDataS = site_dataS.features.filter(function(d){
            return dpS(d.properties.Date) < new Date(value);
          });

          showSyrianSite(newDataS);
        }

      }





    });

d3.select('#slider3').call(slider);

function showWorldSite(data){

    var siteDataW = sites.selectAll(".siteW")
        .data(data);
    siteDataW
        .enter()
        .append("circle")
        .attr("class", "siteW")
        .attr("cx", function(d) {
          var p = projection(d.geometry.coordinates);
          return p[0];
        })
        .attr("cy", function(d) {
          var p = projection(d.geometry.coordinates);
          return p[1]
        })
        .attr("r", 20)
        .transition().duration(70)
        .attr("r", 10);

      siteDataW.exit()//remove the selection which are to be removed from dataset
          .transition().duration(500).delay(1000)
          .attr("r",0)
          .style("opacity", 0.5)
          .remove();
}
function showGermanSite(data){


  var sitedataG = sites.selectAll(".siteG")
      .data(data);
  sitedataG
      .enter()
      .append("circle")
      .attr("class", "siteG")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .on("click", tip.show)
      .on('mouseout', tip.hide)
      .attr("r", 1.25)
      .transition().duration(70)
      .attr("r", 0.25);
    sitedataG.exit()//remove the selection which are to be removed from dataset
      //.transition().duration(200)
        .attr("r",0)
        .remove();

}

function showSyrianSite(data){
  var radScale = d3.scale.linear()
    .domain(d3.extent(data, function(d){
      return d.properties.Value }))
    .range([0.1,.5]);
  var siteDataS = sites.selectAll(".siteS")
      .data(data);
  siteDataS
      .enter()
      .append("circle")
      .attr("class", "siteS")
      .attr("cx", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[0];
      })
      .attr("cy", function(d) {
        var p = projection(d.geometry.coordinates);
        return p[1]
      })
      .attr("r", function(d){
        return 1.75 * radScale(d.properties.Value)
      })
      .transition().duration(70)
      .attr("r", function(d){
        return radScale(d.properties.Value)
      });

    siteDataS.exit()//remove the selection which are to be removed from dataset
        .transition().duration(10)
        .attr("r",0)
        .remove();


}
相关问题
最新问题