个人中心
gpt4 book ai didi

javascript - 改变 map 上的颜色 D3

转载 作者：搜寻专家 更新时间：2023-11-01 04:35:43 24 4
gpt4 key购买 nike

我是 Js 的初学者，我正在尝试使用 D3.js 通过其 Id 更改特定国家(函数 colorCountry)的颜色。但是，我选择什么颜色并不重要。结果将始终显示以橙色突出显示的 map 。我能做些什么来解决这个问题？

我的代码如下。

谢谢。

json 文件可以在这里下载 - https://gist.githubusercontent.com/d3noob/5193723/raw/6e1434b2c2de24aedde9bcfe35f6a267bd2c04f5/world-110m2.json 

<!DOCTYPE html>
<meta charset="utf-8">
<style>

    body {
        background: #fcfcfa;
    }

    .stroke {
        fill: none;
        stroke: #000;
        stroke-width: 3px;
    }

    .fill {
        fill: #fff;
    }

    .graticule {
        fill: none;
        stroke: #777;
        stroke-width: .5px;
        stroke-opacity: .5;
    }

    .land {
        fill: #888;
    }

    .boundary {
        fill: none;
        stroke: #fff;
        stroke-width: .5px;
    }

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>

    var countryCode = 840;   //36: AUSTRALIA * 643: RUSSIA * 76: BRAZIL * 840: USA

    var width = 960,
            height = 580;

    var color = d3.scale.category10();

    var projection = d3.geo.mercator()
            .scale(170)
            .translate([width / 2, height / 2])
            .precision(.1);

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

    var graticule = d3.geo.graticule();

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

    svg.append("defs").append("path")
            .datum({type: "Sphere"})
            .attr("id", "sphere")
            .attr("d", path);

    svg.append("use")
            .attr("class", "stroke")
            .attr("xlink:href", "#sphere");

    svg.append("use")
            .attr("class", "fill")
            .attr("xlink:href", "#sphere");

    svg.append("path")
            .datum(graticule)
            .attr("class", "graticule")
            .attr("d", path);



    d3.json("world-110m2.json", function(error, world) {
        if (error) throw error;

        var countries = topojson.feature(world, world.objects.countries).features,
                neighbors = topojson.neighbors(world.objects.countries.geometries);
        svg.selectAll(".country")
                .data(countries)
                .enter().insert("path", ".graticule")
                .attr("class", "country")
                .attr("d", path)
                .style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} });

        svg.insert("path", ".graticule")
                .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
                .attr("class", "boundary")
                .attr("d", path);

        console.log("value : " + countries[99].id);
        console.log("value : " + countries[12].id);
        console.log("value : " + countries[108].color);

    });

    /*HERE*/
    function colorCountry(country, countryId) {
        if (country.id == countryId) {
            return color(country.color = "#FF0000");
        }
    }

    d3.select(self.frameElement).style("height", height + "px");

</script>

最佳答案

而不是在乡村道路上这样做:

.style("fill", function(d) {
    if (d.id == countryCode) { //there is no need for a condition.
        return color(colorCountry(d, d.id));//this is buggy, not clear what you trying to achieve. Color scale already return a color for the country id.
    }
});

这样做

.style("fill", function(d) {return color( d.id); });

工作代码 here .

关于javascript - 改变 map 上的颜色 D3，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36672732/

24 4 0
文章推荐： javascript - 尝试使用 Nightwatch.js 单击具有相同类的第二个元素
文章推荐： iOS cordova 插件 : How to send plugin result from ios plugin to javascript in background thread
文章推荐： ios - 如何确定特定日期是否为夏令时？
文章推荐： javascript - 由于重定向 URI 无效，Keycloak token 请求被拒绝
搜寻专家
个人简介

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

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com