javascript - 在D3.JS的Choropleth map 上添加图例-6ren

javascript - 在D3.JS的Choropleth map 上添加图例

转载作者：行者123 更新时间：2023-11-29 10:57:31

我正在D3.js中构建一个Choropleth map 。

考虑到量化标度将值分为几个离散的存储桶，并根据其所属的存储桶为每个存储桶分配颜色。可以从下面的代码中获得，我决定传递一种颜色数组，因为知道scale函数会为每种颜色创建一个存储桶。

var color = d3.scaleQuatize().range([
    'rgb(247,251,255)', 'rgb(222,235,247)', 'rgb(198,219,239)',
    'rgb(158,202,225)', 'rgb(107,174,214)', 'rgb(66,146,198)',
    'rgb(33,113,181)', 'rgb(8,81,156)', 'rgb(8,48,107)'
]);

当我打算基于scaleQuantize从数据创建的“存储桶”构建图例时，对如何执行此操作的任何建议都表示赞赏。

我要重现的传说是这个: https://beta.observablehq.com/@mbostock/d3-choropleth

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>VI - Gonçalo Peres</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css"
          href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
    <nav class="navbar navbar-default">
        <div id="mySidenav" class="sidenav">
            <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
            <a href="#">Contexto</a>
            <a href="#">1.ª Codificação Visual</a>
            <a href="#">2.ª Codificação Visual</a>
            <a href="#">3.ª Codificação Visual</a>
        </div>
        <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; Menu</span>
        <br>
        <br>
        <div class="container">
            <a class="navbar-brand" href="#"><img id="logo" src="img/logo.png"></a>
        </div>
    </nav>

    <div id="intro">
        <h2>1.ª Codificação Visual</h2>
        <span>Lorem ipsum.</span><br>
        <span>Lorem Ipsum.</span><br>
    </div>
    <div id="legenda">
        <h4>Legenda</h4>
        <span>Lorem ipsum.</span><br>
        <span>Lorem ipsum.</span><br>
    </div>
    <div id="chart"></div>
    <div id="buttons">
        <button type="button" class="panning up"><i class="fa fa-arrow-up"></i></button>
        <button type="button" class="panning down"><i class="fa fa-arrow-down"></i></button>
        <button type="button" class="panning left"><i class="fa fa-arrow-left"></i></button>
        <button type="button" class="panning right"><i class="fa fa-arrow-right"></i></button>
        <button type="button" class="zooming in"><i class="fa fa-plus"></i></button>
        <button type="button" class="zooming out"><i class="fa fa-minus"></i></button>
    </div>

    <div id="note">
        <span>Gonçalo Peres | <b><a href="http://goncaloperes.com/" target="_blank">GoncaloPeres.com</a></b></span><br>
        <span>Data from: <a href="https://public.enigma.com/datasets/u-s-department-of-agriculture-honey-production-2013/41cf2441-e96f-4113-a02f-402d167a9cd8" target="_blank">Enigma Public</a></span>
    </div>

    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="js/app.js"></script>
</body>
</html>

app.js

// Width and height
var chart_width     =   800;
var chart_height    =   600;
var color           =   d3.scaleQuantize().range([
     'rgb(247,251,255)', 'rgb(222,235,247)', 'rgb(198,219,239)',
     'rgb(158,202,225)', 'rgb(107,174,214)', 'rgb(66,146,198)',
     'rgb(33,113,181)', 'rgb(8,81,156)', 'rgb(8,48,107)'
]);


//Navbar
function openNav() {
    document.getElementById("mySidenav").style.width = "100%";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}


// Projection
var projection      =   d3.geoAlbersUsa()
    .translate([ 0,0 ]);
var path            =   d3.geoPath( projection );
    // .projection( projection );

// Create SVG
var svg             =   d3.select("#chart")
    .append("svg")
    .attr("width", chart_width)
    .attr("height", chart_height);

var zoom_map        =   d3.zoom()
    .scaleExtent([ 0.5, 3.0 ])
    .translateExtent([
        [ -1000, -500 ],
        [ 1000, 500 ]
    ])
    .on( 'zoom', function(){
    // console.log( d3.event );
    var offset      =   [
        d3.event.transform.x,
        d3.event.transform.y
    ];
    var scale       =   d3.event.transform.k * 2000;

    projection.translate( offset )
        .scale( scale );

    svg.selectAll( 'path' )
        .transition()
        .attr( 'd', path );

    svg.selectAll( 'circle' )
        .transition()
        .attr( "cx", function(d) {
            return projection([d.lon, d.lat])[0];
        })
        .attr( "cy", function(d) {
            return projection([d.lon, d.lat])[1];
        });
});

var map             =   svg.append( 'g' )
    .attr( 'id', 'map' )
    .call( zoom_map )
    .call(
        zoom_map.transform,
        d3.zoomIdentity
            .translate( chart_width / 2, chart_height / 2 )
            .scale( 1 )
    );

map.append( 'rect' )
    .attr( 'x', 0 )
    .attr( 'y', 0 )
    .attr( 'width', chart_width )
    .attr( 'height', chart_height )
    .attr( 'opacity', 0 );

// Data
d3.json( 'data/USDepartmentofAgriculture-HoneyProduction-2013_properties.json', function( honey_data ){
    color.domain([
        d3.min( honey_data, function(d){
            return d.honey_producing_colonies;
        }),
        d3.max( honey_data, function(d){
            return d.honey_producing_colonies;
        })
    ]);

    d3.json( 'data/us.json', function( us_data ){
        us_data.features.forEach(function(us_e, us_i){
            honey_data.forEach(function(h_e,h_i){
                if( us_e.properties.name !== h_e.state ){
                    return null;
                }

                us_data.features[us_i].properties.average_price_per_pound   =   parseFloat(h_e.average_price_per_pound);
            });
        });

        // console.log(us_data);

        map.selectAll( 'path' )
            .data( us_data.features )
            .enter()
            .append( 'path' )
            .attr( 'd', path )
            .attr( 'fill', function( d ){
                var average_price_per_pound         =   d.properties.average_price_per_pound;
                return average_price_per_pound ? color( average_price_per_pound ) : '#525252';
            })
            .attr( 'stroke', '#fff' )
            .attr( 'stroke-width', 1 );

        // draw_cities();
    });
});

// function draw_cities(){
//     d3.json( 'data/us-cities.json', function( city_data ){
//         map.selectAll("circle")
//             .data(city_data)
//             .enter()
//             .append( "circle" )
//             .style( "fill", "#9D497A" )
//             .style( "opacity", 0.8 )
//             .attr( 'cx', function( d ){
//                 return projection([ d.lon, d.lat ])[0];
//             })
//             .attr( 'cy', function( d ){
//                 return projection([ d.lon, d.lat ])[1];
//             })
//             .attr( 'r', function(d){
//                 return Math.sqrt( parseInt(d.population) * 0.00005 );
//             })
//             .append( 'title' )
//             .text(function(d){
//                 return d.city;
//             });
//     });
// }

d3.selectAll( '#buttons button.panning' ).on( 'click', function(){
    var x           =   0;
    var y           =   0;
    var distance    =   100;
    var direction   =   d3.select( this ).attr( 'class' ).replace( 'panning ', '' );

    if( direction === "up" ){
        y           +=  distance; // Increase y offset
    }else if( direction === "down" ){
        y           -=  distance; // Decrease y offset
    }else if( direction === "left" ){
        x           +=  distance; // Increase x offset
    }else if( direction === "right" ){
        x           -=  distance; // Decrease x offset
    }

    map.transition()
        .call( zoom_map.translateBy, x, y );
});

d3.selectAll( '#buttons button.zooming' ).on( 'click', function(){
    var scale       =   1;
    var direction   =   d3.select(this).attr("class").replace( 'zooming ', '' );

    if( direction === "in" ){
        scale       =  1.25;
    }else if(direction === "out"){
        scale       =  0.75;
    }

    map.transition()
        .call(zoom_map.scaleBy, scale);
});

style.css

#intro {
    position: absolute;
    top: 250px;
    left: 125px;
    width: 180px;
    text-align: left;
    color: #B5B5B5;
}

#intro h2{
    font-family: Oswald;
    font-size: 25px;
    font-weight: 300;
    text-align: center;
    color: white;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.3em;
}

#legenda {
    position: absolute;
    top: 250px;
    right: 125px;
    width: 180px;
    text-align: left;
    color: #B5B5B5;
}

#legenda h4{
    font-family: Oswald;
    font-size: 20px;
    font-weight: 300;
    text-align: center;
    color: white;
    -webkit-margin-before: 0.5em;
    -webkit-margin-after: 0.3em;
}

body {
    font-size: 11px;
    font-weight: 400;
    font-family: 'Open Sans', sans-serif;
    text-align: center;
    vertical-align: middle;
    background: #111;
    fill: white;
    color: white;
    cursor:default;
}

.navbar-brand {
    height: 60px;
    padding: 5px 0px;
}

#chart{
    width: 800px;
    height: 600px;
    background-color: #111;
    margin: 25px auto;
}
#buttons{
    width: 800px;
    margin: 25px auto;
    text-align: center;
}
button{
    background-color: white;
    color: black;
    width: 100px;
    padding: 10px;
    font-size: 20px;
    text-align: center;
    border: 0;
    outline: 0;
    transition: all .2s linear;
    cursor: pointer;
}
button:hover{
    background-color: #50B98C;
}

#note {
    top: -10px;
    left: 10px;
    font-size: 12px;
    font-weight: 300;
    color: #6E6E6E;
    text-align: center;
}

a {
    color: #6E6E6E;
}


.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: black;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
    text-align:center;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s;

}

.sidenav a:hover{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
}

最佳答案

通过使用以下命令更新d3.json的末尾来解决:

    const x = d3.scaleLinear()
        .domain(d3.extent(color.domain()))
        .rangeRound([600, 860]);

    const g = svg.append("g")
        .attr("transform", "translate(0,40)");

    g.selectAll("rect")
        .data(color.range().map(d => color.invertExtent(d)))
        .enter().append("rect")
        .attr("height", 8)
        .attr("x", d => x(d[0]))
        .attr("width", d => x(d[1]) - x(d[0]))
        .attr("fill", d => color(d[0]));

    g.append("text")
        .attr("class", "caption")
        .attr("x", x.range()[0])
        .attr("y", -6)
        .attr("fill", "#fff")
        .attr("text-anchor", "start")
        .attr("font-weight", "bold")
        .text('Average Price per Pound (cents)');

    g.call(d3.axisBottom(x)
        .tickSize(13)
        .tickFormat(( honey_data, function(d){
            return d.average_price_per_pound;
        }),)
        .tickValues(color.range().slice(1).map(d => color.invertExtent(d)[0])))
        .select(".domain")
        .remove();

    svg.append("g")
        .selectAll("path")
        .data(honey_data, function(d){
            return d.average_price_per_pound;
        })
        .enter().append("path")
        .attr("fill", d => color(d.average_price_per_pound))
        .attr("d", path)
        .append("title")
        .text(d => (d.average_price_per_pound));

    svg.append("path")
        .datum(honey_data, function(d){
            return d.average_price_per_pound;
        })
        .attr("fill", "none")
        .attr("stroke", "white")
        .attr("stroke-linejoin", "round")
        .attr("d", path);

关于javascript - 在D3.JS的Choropleth map 上添加图例，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54293177/

文章推荐： javascript - 如何获取具有海关关系的数组项？

文章推荐： javascript - React Native FlatList 只渲染 10 个项目

c++ - 如何遍历 vector 图的 map map map map map map map vector
我正在尝试从一个 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 map 的 m
function - map map vs map.map
我是 Haskell 的新手，我认为函数 map map和 map.map在 Haskell 中是一样的。我的终端给了我两种不同的类型， (map.map) :: (a -> b) -> [[a]
java - Map of maps - 如何将内部 map 保留为 map ？
我的目标是创建一个 map 的 map ，这样我就可以通过它的键检索外部 map 的信息，然后通过它们的键访问它的“内部” map 。但是，当我得到每个内部映射时，我最初创建的映射变成了一个对象，我
java - map 的 map 根据内部 map 值获取外部 map
如何使用 Java8 编写以下代码？ for (Entry> entry : data.entrySet()) { Map value = entry.getValue(); if (valu
map - 如何为 map 叠加层准确制作 map
我有覆盖整个南非的图片。它们为Tiff格式，并已将坐标嵌入其中。我正在尝试拍摄这些图像（大约20张图像），并将它们用作我的iPhone应用程序中的地图叠加层。我的问题在于（准确地）将地图切成图块。我
c++ - 如何从一个 map 键列表中减去另一个 map 键列表并获得新 map ( map A - mab B = map C)
所以我有 2 std::map s >一个是“旧的”，一个是“新的”，我想知道哪些文件被删除了，这样就能够遍历差异并对 shared_ptr 做一些事情。这样的事情可能吗？如何做到？最佳答案虽然
google-maps - 将 google.maps.Map 转换为静态 map 链接
是否可以将当前查看的 google.maps.Map 转换为静态图像链接，以便我可以获取图像并将其嵌入到 PDF 中？我在 map 上添加了一些带有自定义图标的标记，所以我不确定这是否真的可行。如
java - 如何将 map 的 map 列表合并为 map 的 map ？
你能帮我吗 Java Streams ？从标题可以看出我需要合并List>>进入Map> . 列表表示为List>>看起来像: [ { "USER_1":{
java - Collection.shuffle 不适用于 Map 键和 Map 值。我有一张 map 中的 map 。我想打乱最里面的 map
对于 idAndTags 的第二个条目，内部映射被打乱，但第一个条目则不然第一次接近! for (Map.Entry> entryOne : idAndTags.entrySet()) {
map - 如何在定义整个 map 之前引用 map 中的变量？
我将从我的代码开始，因为它应该更容易理解我想要做什么: @function get-color($color, $lightness) { @return map-get(map-get($col
google-maps - Google map 窗口仅显示部分 map
我过去曾在许多网站上使用过 Google map ，但遇到了以前从未遇到过的问题。 map 窗口正在显示，但它只显示左上角的 map 片段，以及之后的任何内容(即使我在周围导航时)，右侧也不会加载任何
google-maps - 中国 map - 卫星 map 和默认街道 map 哪个是正确的？这是否意味着地理编码结果是错误的？
众所周知，这些 map ，无论是常规街道 map 还是卫星 map ，在中国的特定地区都无法正确排列。那么哪个 map 排列正确，是卫星 map 还是默认街道 map ？一些网站表明卫星 map 是正
maps - 如何在此处 map 中拖动 map 后获取边界
在拖尾事件之后，我面临着获取此处 map 中的 map 边界的问题。我需要新的经纬度来在新更改的视口(viewport)中获取一些项目/点。我只是想在拖动结束时获得谷歌地图map.getBounds(
bing-maps - Bing map - 英国邮政编码到 map
我想做的是通过 ajax API 显示以英国邮政编码为中心的小型 bing 生成 map 。我相信这是可能的；我在 Bing map 文档中找不到如何将英国邮政编码转换为可以插入 map Ajax 控
java - 如何将列表转换为 map 的 map Map>
我有一个 List我想转换成的 e Map>其中外部字符串应为“Name”，内部字符串应为“Domain”。 Name Id Domain e(0) - Emp1, 1, Insuran
C++ : filling map of maps via map instance allocation from a vector of maps
我的第 2 部分:https://stackoverflow.com/questions/21780627/c-map-of-maps-typedef-doubts-queries 然后我继续创建 I
带有总和的 Map of Map 的 Java8 Map
是否可以在 1 行中使用 Java8 编写以下所有 null 和空字符串检查？ Map> data = new HashMap<>(holdings.rowMap()); Set>> entrySet
java - 重构 Java Map of Map of Map
我正在审查一个项目的旧代码，并使用 Map 的 Map 的 Map 获得了如下数据结构(3 层 map ): // data structure Map>>> tagTree
java - 如何正确地延迟初始化 Map of Map 的 Map？
这可能是一种不好的做法，但我还没有找到更好的解决方案来解决我的问题。所以我有这张 map // Map>> private Map>> properties; 我想初始化它，这样我就不会得到 Null
Java 为什么 Map of Map (ex : Map>) 不可序列化
我们在 JDK 1.7 中使用 HashMap，我在使用 SonarQube 进行代码审查时遇到了一些问题。请考虑以下示例: public class SerializationTest imple

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 在D3.JS的Choropleth map 上添加图例