Question

如何使用d3.js版本5使海洋区域保持白色背景？我正在使用this bl.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>

Answer 1

由于您正在使用svg的＆路径，因此使用css选择器定位海洋并且在不添加id或class的情况下不影响其他事情是非常不切实际的（理论上，您可以看到它是否在svg中保持相同的位置svg组[x]并使用：nth-child（x）选择器定位，然后覆盖：hover fill属性，但这似乎不是最好的方法）

尽管它已经具有不同的颜色，所以显然在某个时候它会单独起作用。我会尝试找到它在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)")

绑定数据和创建路径的地方，应该起作用。它应该过滤对象的continent属性（在json数据中）是否为“ open ocean”，并返回一种颜色或另一种颜色，然后执行相同的操作将一个类添加到大洋区域并用该CSS覆盖：hover样式选择器

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

最后编辑：

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

使D3版本5的地图海洋像D3版本3的地图海洋

1 个答案: