Слайдер для хороплета - PullRequest
Новая
       31

Слайдер для хороплета

0 голосов
/ 14 февраля 2020

В настоящее время я работаю над графом хороплета. Как я могу заставить слайдер обновлять график по годам? Я не могу заставить слайдер взаимодействовать с графиком.

В качестве альтернативы, возможно ли создать слайдер для перехода на другой график / график? Могу ли я создать несколько графиков, а затем назначить значение ползунка для каждого графика? 

 <style>

@media print {
  div {page-break-after: always;}
}

.state-borders {
  fill: none;
  stroke: #999;
  stroke-linejoin: round;
}
<!-- llll -->
input {
  display: block;
  width: 200px;
  margin: 10px 5px 5px 5px;
}
.tooltip {
  position: absolute;
  padding: 7px;
  font-size: 0.9em;
  pointer-events: none;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  -moz-box-shadow:    3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
  box-shadow:         3px 3px 10px 0px rgba(0, 0, 0, 0.25);
}

.tooltip p {
  margin: 0;
  padding: 0;
}

.tooltip table {
  margin: 0;
  padding: 0;
  border-collapse: collapse;
}

  </style>
    </head>    
    <body>

    <!-- <div class="slider"></div> -->


      <article role="main" class="pickle">

        <script type="text/javascript">            
var margin = {top: 25, right: 25, bottom: 25, left: 25};
var width = 1000 - margin.left - margin.right;
var height = 700 - margin.top - margin.bottom;

var svg = d3.select("article.pickle").insert("svg", "p").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var data = [];

var projection = d3.geoAlbersUsa()
    .scale(1000)
    .translate([width / 2, height / 2]);

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

var color = d3.scaleLog().range([d3.schemeReds[9][0], "red"]);

var promises = [
  d3.json("states.json"),
  d3.dsv(",", "state-Crimes.csv", function(d, i) {temp = []; temp.states = d.States; temp.region = d.Region; temp.ten = d['2010']; temp.eleven = d['2011']; temp.twelve = d['2012']; temp.thirteen = d['2013']; temp.fourteen = d['2014']; temp.fifteen = d['2015']; temp.tot = +d['Total Crimes']; data.push(temp);})
]

Promise.all(promises).then(ready)

function ready([us]) {

    tip = d3.tip().attr('class', 'd3-tip').html(function(d) {temp = ""; temp2 = 0; data.forEach(function(da) {if (da.states == d.properties.name) {temp = da.region; temp2 = da.tot;};}); return "<div>State: " + d.properties.name + "</div><div>Region: " + temp + "</div><div>Crimes: " + temp2 + "</div>"; });
    svg.call(tip);

    max_num = d3.max(data, d => d['tot']);
    color.domain([1, max_num]);

    svg.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.states).features)
    .enter().append("path")
    .attr("d", path)
    .attr("fill", function(d) {temp = "black"; data.forEach(function(da) {if (da.states == d.properties.name) {temp = color(da.tot);};}); return temp;})
    .on('mouseover', tip.show)
    .on('mouseout', tip.hide)

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

function update(year){
        slider.property("value", year);
        d3.select("d.properties.year").text(year);
        countyShapes.style("fill", function(d) {
            return svg.attr("fill", function(d) {temp = "black"; data.forEach(function(da) {if (da.states == d.properties.name) {temp = color(da.tot);};}); return temp;})
        });


    }


    var slider = d3.select(".slider")
        .append("input")
            .attr("type", "range")
            .attr("min", 2010)
            .attr("max", 2015)
            .attr("step", 1)
            .on("input", function() {
                var year = this.value;
                update(year);
            });

}   

        </script>
...