使 D3 版本 5 地图海洋类似于 D3 版本 3 地图海洋答案

【问题标题】：Make D3 version 5 map ocean like D3 version 3 map ocean使 D3 版本 5 地图海洋类似于 D3 版本 3 地图海洋
【发布时间】：2020-07-11 11:08:28
【问题描述】：

如何使用 d3.js 版本 5 使海洋区域保持白色背景？我正在使用thisbl.ocks.org 页面中的内容，但版本不同。她使用的是版本 3，而我使用的是版本 5。我有两页，一页使用版本 3 here，一页使用版本 5 here。两者的 CSS 和 HTML 是相同的。唯一不同的是 D3 版本。如何使版本 5 的海洋部分看起来像版本 3 的海洋部分是白色的？谢谢。

这是我为地图设置的 css 和 js。

<style type="text/css">

            svg {
                background-color: white;
            }

            h1 {
                color: rgb(115, 115, 115);
                font-size: 18px;
                font-family: sans-serif;
                font-weight: bold;
                margin: 0;
                padding-bottom: 10px;

            }

            #container {
                width: 90%;
                margin-left: auto;
                margin-right: auto;
                margin-top: 20px;
                padding: 20px;
                background-color: white;
                box-shadow: 1px 1px 1px 2px rgb(217, 217, 217);
            }

            path:hover {
                fill: rgba(157, 197, 243, 0.911);
                cursor:pointer;
            }



        </style>
    </head>
    <body>


    <div id="container">

    </div>
        

        <script type="text/javascript">



            //Width and height
            var w = 800;
            var h = 600;

            //Define map projection


            var projection = d3.geoMercator() //utiliser une projection standard pour aplatir les pôles, voir D3 projection plugin
                                   .center([ 23, 42 ]) //comment centrer la carte, longitude, latitude
                                   .translate([ w/2, h/2 ]) // centrer l'image obtenue dans le svg
                                   .scale([ w/1.5 ]); // zoom, plus la valeur est petit plus le zoom est gros 

            //Define path generator
            var path = d3.geoPath()
                             .projection(projection);


            //Create SVG
            var svg = d3.select("#container")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            //Load in GeoJSON data
            d3.json("data/ne_50m_admin_0_countries_simplified.json").then( function(json) {
                
                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .attr("stroke", "rgba(8, 81, 156, 0.2)")
                   .attr("fill", "rgba(8, 81, 156, 0.6)");
        
            });


        
        </script>
    </body>

【问题讨论】：

标签： javascript d3.js

【解决方案1】：

由于您正在使用 svg 和路径，因此使用 css 选择器定位海洋并且不影响其他事物而不具体添加 id 或类将是非常不切实际的（理论上您可以查看它是否在svg group [x] 并使用 :nth-child(x) 选择器定位它，然后覆盖 :hover 填充属性，但似乎不是最好的方法）

虽然它已经有了不同的颜色，所以很明显它在某些时候会单独产生影响。我会尝试找到它在 JS 中的更改位置，看看是否有一个选项可以传递给海洋。 d3 .geo 函数似乎是一个很好的查看位置，以及查看您传入的 json。

可能有用的链接：

https://www.tutorialspoint.com/d3js/d3js_geographies.htm

Change color on a map D3

抱歉，我无法直接为您回答，但我也是 d3 的新手，对此我也很好奇。如果您知道如何做到这一点，如果您将您的发现发回此处将不胜感激:)

编辑：我想我找到了一些东西！我仍在进行快速设置以对其进行测试，但我认为这样做：

.style("stroke", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return "rgba(8, 81, 156, 0.2)"}
            else {return "rgba(255, 255, 255, 0.2)"}
        })
.style("fill", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return "rgba(8, 81, 156, 0.6)"}
            else {return "rgba(255, 255, 255, 0.6)"}
        })
.classed("ocean-area", (feature) => {
            if (feature.continent != "Seven seas (open ocean)"){ return true}
            else {return false}
        });

而不是这样：

.attr("stroke", "rgba(8, 81, 156, 0.2)")
.attr("fill", "rgba(8, 81, 156, 0.6)")

你在哪里绑定你的数据和创建路径，应该工作。它应该过滤对象的大陆属性（在 json 数据中）是否为“开放海洋”并返回一种颜色或另一种颜色，然后执行相同的操作将类添加到海洋区域并用该 CSS 覆盖 :hover 样式选择器

http://www.d3noob.org/2013/01/select-items-with-if-statement-in-d3js.html

上次编辑：

我在 d3 方面太糟糕了，甚至无法获得此工作的本地副本：/ 但是将示例与您的示例进行比较，我发现在示例中实际上并没有填满海洋。仔细观察你的，我看到海洋上有一个填充物，以及一些属于同一填充物的内陆点，因此当用它在海洋上空盘旋时会改变颜色。这使我认为这与输入的数据有关，甚至与数据的格式化方式有关。经过一整天，我还是放弃了，祝你好运，感谢下一个人！

【讨论】：