在地图D3上更改颜色

Question

在地图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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

i--*_*i-- 0

if我对 d3 不是很熟悉，但这行似乎有太多s：

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

Run Code Online (Sandbox Code Playgroud)

如果你这样做会更简单：

.style("fill", colorCountry);

Run Code Online (Sandbox Code Playgroud)

并将你的colorCountry函数更改为

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

Run Code Online (Sandbox Code Playgroud)

或者干脆去掉这个colorCountry函数并使用它

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

Run Code Online (Sandbox Code Playgroud)

但为什么不直接更新 JSON 数据呢？

归档时间：	9 年，9 月前
查看次数：	3396 次
最近记录：	7 年，11 月前