Question

我有一张地图，可以在移动滑块时显示建筑物。我希望能够以HTML文本的形式显示当滑块上下移动时构建的建筑物数量。

滑块读取建筑物的方式是建筑物建造的日期。所以id需要一种方法来读出滑块中每个点构建的建筑物的数量。

我真的无法解决这个问题，所以任何帮助都会非常感激。

    <!DOCTYPE html>
<head>
    <title>D3 Mapping Timeline</title>
<meta charset="utf-8">
<link rel="stylesheet" href="assets/d3.slider.css"/>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet">
<style>

path {
  fill: none;
  stroke: #525252;
  stroke-width: .5px;
}

.land-boundary {
  stroke-width: .3px;
}

.county-boundary {
  stroke: #ddd;
    stroke-width: .3px;
}

.state-boundary {
    stroke-width: .3px;
}

.site {
    stroke-width: .5px;
  stroke: #ffffff;
  fill: rgba(228, 127, 218, 0.54);
    cursor: pointer;
}


div.tooltip {
    position: absolute;
    text-align: center;
    width: 300px;
    height: 75px;
    padding: 3px;
    font-family: 'Inconsolata', monospace;
        color: rgb(75, 75, 75);
        font-size: 12px;
    background: rgba(236, 236, 236, 0.85);
    border-radius: 2px;
    pointer-events: none;
}

#slider3 {
  margin: 130px 0 -30px 220px;
  width: 500px;
}

#title {
    position: absolute;
    margin: -120px 0 10px 240px;
    font-family: 'Roboto', sans-serif;
}

#subtitle {
    position: absolute;
    margin: -80px 0 10px 380px;
    font-family: 'Roboto', sans-serif;
}

#axis1985 {
    position: absolute;
    margin: 15px 0 10px 210px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#axis1990 {
    position: absolute;
    margin: 15px 0 10px 275px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#axis1995 {
    position: absolute;
    margin: 15px 0 10px 355px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}


#axis2000 {
    position: absolute;
    margin: 15px 0 10px 435px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#axis2005 {
    position: absolute;
    margin: 15px 0 10px 515px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#axis2010 {
    position: absolute;
    margin: 15px 0 10px 595px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#axis2015 {
    position: absolute;
    margin: 15px 0 10px 675px;
    font-family: 'Inconsolata', monospace;
    font-size: 12px;
}

#radio {
    position: absolute;
    margin: 2px 0 0 325px;
    font-family: 'Inconsolata', monospace;
    font-size: 11px;
}

/* The container */
.container {
    display: relative;
    position: relative;
    padding-left: 15px;
        padding-top: 5px;
    margin: 0px 5px 15px 10px;
    cursor: pointer;
    font-size: 10px;
        font-family: 'Roboto';
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 5px;
    left: 0;
    height: 13px;
    width: 13px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.container:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.container input:checked ~ .checkmark {
    background-color: #2196F3;
}

/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.container input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: white;
}

</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="assets/d3.slider.js"></script>

</head>

<body>

    <div id="title">
        <h1><b>Timeline Map</b></h1>
        </div>

    <div id="subtitle">
        <h5>Move slider to see goals</h5>
        </div>

        <div id="axis1985">
            <h8></h8>
            </div>

        <div id="axis1990">
            <h8>1990</h8>
            </div>

            <div id="axis1995">
                <h8>1995</h8>
                </div>

                <div id="axis2000">
                    <h8>2000</h8>
                    </div>

                    <div id="axis2005">
                        <h8>2005</h8>
                        </div>

                        <div id="axis2010">
                            <h8>2010</h8>
                            </div>

                            <div id="axis2015">
                                <h8>2015</h8>
                                </div>


    <div id="slider3">
        </div>


<div id = "radio">
        <form>
<label class="container"><input type="radio" checked="checked" name="radio"> <span class="checkmark"></span>Button 1 </label>
<label class="container"><input type="radio" name="radio"><span class="checkmark"></span>Button 2</label>
<label class="container"><input type="radio" name="radio"><span class="checkmark"></span>Button 3</label>
<label class="container"><input type="radio" name="radio"><span class="checkmark"></span>Button 4</label>
        </form>
    </div>

<script>


var width = 960,
    height = 600;

var mapPath = "data/us.json";

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

var projection = d3.geo.albersUsa()
    .scale(960)
    .translate([width / 2, height / 2]);

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

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

d3.json(mapPath, function(error, us) {
  if (error) return console.error(error);

  svg.append("path")
      .datum(topojson.feature(us, us.objects.land))
      .attr("d", path)
      .attr("class", "land-boundary");

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.counties, function(a, b) { return a !== b && (a.id / 1000 | 0) === (b.id / 1000 | 0); }))
      .attr("d", path)
      .attr("class", "county-boundary");

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


  d3.tsv("data/dataFinal.txt")
    .row(function(d) {
      return {
        permalink: d.permalink,
        lat: parseFloat(d.lat),
        lng: parseFloat(d.lon),
                state: d.state,
                fullAddress: d.fullAddress,
                handlerName: d.handlerName,
        date725: moment(d.date725,"YYYY-MM-DD HH:mm"),
                year725: d.year725
            };
    })
    .get(function(err, rows) {
        if (err) return console.error(err);

      window.site_data = rows;
    });
});

//display the sites using "permalink"
var displaySites = function(data) {
  var sites = svg.selectAll(".site")
      .data(data, function(d) {
        return d.permalink;
      });

  sites.enter().append("circle")
      .attr("class", "site")
      .attr("cx", function(d) {
        return projection([d.lng, d.lat])[0];
                        })
      .attr("cy", function(d) {
        return projection([d.lng, d.lat])[1];
            })
                 .on("mouseover", function(d) {
                 div.transition()
                         .duration(200)
                         .style("opacity", .9);
                 div.html("Handler Name:" + "<br>" + d.handlerName + "<br>" +  "<br>" + "Address:" + "<br>" + d.fullAddress + "<br>")
                        .style("left", (d3.event.pageX) + "px")
                        .style("top", (d3.event.pageY - 28) + "px");
                 })
             .on("mouseout", function(d) {
                 div.transition()
                        .duration(200)
                      .style("opacity", 0);
            })
              .attr("r", 1)
              .transition().duration(800)
                .attr("r", 7);

  sites.exit()
    .transition().duration(100)
      .attr("r",0)
      .remove();
};

var minDateYear = moment('1985-12-19', "YYYY-MM-DD HH:mm");
var maxDateYear = moment('2017-09-29', "YYYY-MM-DD HH:mm");
var secondsInDay = 60 * 60 * 24;

d3.select('#slider3').call(d3.slider()
  //.axis(true).min("1986").max("2017")
    .axis(false).min(minDateYear).max(maxDateYear)
  .on("slide", function(evt, value) {
    var newData = _(site_data).filter( function(site) {
      return site.date725 < value;
    })
     //console.log("New set size ", newData.length);
     //console.log("svg value ", newData);
    displaySites(newData);
  })
);

</script>
</body>

Answer 1

啊，能够通过在HTML中设置div然后添加以下代码来使其工作。谢谢您的帮助！ document.getElementById（＆＃34; result＆＃34;）。innerHTML = newData.length;

滑块上的HTML更新

1 个答案: