wangziheng
/
scancode-miro


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IsoBands example</title>

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

</head>
<body>

<div id="isocontours"></div>

<script>

    var intervals = [-5, -4.5, -4.1, -4.05, -4, -3.9, -3.8, -3.7, -3.6, -3.5, -3.4, -3.3, -3.2, -3.1, -3.0, -2.5, -2, -1.5, -1, -0.5, 0];

    var data = [
      [0.0,   0.0,   0.0,   0.0, 0.0],
      [0.0, -3.57, -4.12, -3.59, 0.0],
      [0.0, -3.64, -4.21, -3.62, 0.0],
      [-10.0, -3.57, -3.99, -3.79, 0.0],
      [0.0, -3.75, -4.11, -3.94, 0.0],
      [0.0,  -4.0, -3.98, -4.08, 0.0],
      [0.0, -4.09, -4.04,   0.0, 0.0],
      [0.0,   0.0,   0.0,   0.0, 0.0]
    ];

    var xs = d3.range(0, data[0].length);
    var ys = d3.range(0, data.length);

    var isoLines = [];
    MarchingSquaresJS
      .isoLines(data,
                intervals,
                {
                    polygons: false,
                    linearRing: false
                }
      )
      .forEach(function(isolines, i) {
        isoLines.push({
          "coords": isolines,
          "level": i + 1,
          "val": intervals[i]});
      });

    drawLines('#isocontours', isoLines, intervals);


    // helper function
    function drawLines(divId, lines, intervals) {

        var marginBottomLabel = 0;

        var width = 300;
        var height = width * (ys.length / xs.length);

        var xScale = d3.scale.linear()
                .range([0, width])
                .domain([Math.min.apply(null, xs), Math.max.apply(null, xs)]);

        var yScale = d3.scale.linear()
                .range([0, height])
                .domain([Math.min.apply(null, ys), Math.max.apply(null, ys)]);

        var colours = d3.scale.linear().domain([intervals[0], intervals[intervals.length - 1]])
                .range([d3.rgb(0, 0, 0),
                    d3.rgb(200, 200, 200)]);

        var svg = d3.select(divId)
                .append("svg")
                .attr("width", width)
                .attr("height", height + marginBottomLabel);

        svg.selectAll("path")
                .data(lines)
                .enter().append("path")
                .style("fill", "none")
                .style("stroke", function (d) {
                    return colours(d.val);
                })
                .style("stroke-width", 1)
                .style('opacity', 1.0)
                .attr("d", function (d) {
                    var p = "";
                    d.coords.forEach(function (aa) {
                        p += (d3.svg.line()
                            .x(function (dat) {
                                return xScale(dat[0]);
                            })
                            .y(function (dat) {
                                return yScale(dat[1]);
                            })
                            .interpolate("linear")
                        )(aa) + "";
                    });
                    return p;
                })
                .on('mouseover', function () {
                    d3.select(this)
                    .style('stroke', d3.rgb(204, 185, 116))
                    .style("stroke-width", 3);
                })
                .on('mouseout', function () {
                    d3.select(this)
                    .style('stroke', function (d1) {
                        return colours(d1.val);
                    })
                    .style("stroke-width", 1);
                });
    }

</script>
</body>
</html>