更改地图D3的颜色

贾斯

我是Js的初学者,我正在尝试使用D3.js通过其ID更改特定国家(功能colorCountry的颜色。但是,无论选择哪种颜色都没关系。结果将始终以橙色突出显示地图。我该怎么做才能解决这个问题?

我的代码如下。

谢谢。

可以在这里下载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>
一世 -

我对d3不太熟悉,但if此行中似乎有太多s:

.style("fill", function(d) { if (d.id == countryCode) { return color(colorCountry(d, d.id));} });

如果您这样做,会更简单:

.style("fill", colorCountry);

并将您的colorCountry功能更改

function colorCountry(country) {
    if (country.id == countryCode) {
        return '#FF0000';
    } else {
        return color(country.id);
    }
}

或简单地colorCountry一起摆脱功能,并使用此

.style("fill", function(d) {
    return (d.id == countryCode) ? '#FF0000' : color(d.id);
});

但是,为什么不只更新JSON数据呢?

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

更改地图颜色的宏(状态)

来自分类Dev

在Cartopy中更改地图边界颜色

来自分类Dev

在ggplot中更改地图颜色

来自分类Dev

更改地图图钉(颜色或图像)

来自分类Dev

如何在 d3 地图上动态更改国家/地区的颜色

来自分类Dev

更改地图上Google徽标的颜色

来自分类Dev

更改图表d3的颜色

来自分类Dev

Openlayers 3:更改地图范围时出现的问题

来自分类Dev

在d3js中修改地图的大小

来自分类Dev

在d3js中修改地图的大小

来自分类Dev

如何更改地图的子地图的值?

来自分类Dev

如何在android中同时更改地图上所有标记的颜色?如何只更改某些标记的颜色?

来自分类Dev

更改地图视图而不更改位置

来自分类Dev

在d3中更改一种节点颜色

来自分类Dev

在D3中双击更改节点的颜色

来自分类Dev

在D3 sankey图中更改节点颜色

来自分类Dev

无法让 AngularJS 和 D3 更改标题颜色

来自分类Dev

更改地图边界Google Maps API

来自分类Dev

用jQuery更改地图地址

来自分类Dev

单击React Leaflet v.3.x中的标记时,如何动态更改地图缩放?

来自分类Dev

d3 JavaScript单击线条以更改线条颜色-更改所有线条

来自分类Dev

使用鼠标位置更改D3地图工具提示的类

来自分类Dev

使用鼠标位置更改D3地图的工具提示的类

来自分类Dev

是否有用于Google地图的npm软件包,其中包含用于动态更改地图上每个标记的颜色的选项?

来自分类Dev

topojson / D3 /经度+纬度的地图

来自分类Dev

D3 + Google地图+多点路径

来自分类Dev

D3 + Google地图+多点路径

来自分类Dev

topojson / D3 /经度+纬度的地图

来自分类Dev

D3 Geojson 地图不会显示