个人中心
gpt4 book ai didi

javascript - d3 等值线队列和填充问​​题

转载 作者：行者123 更新时间：2023-11-28 04:57:00 25 4
gpt4 key购买 nike

我有两个不同的问题，但它们可能相关:

  1. 如果我在同时加载两个 json 文件之一时调用回调函数，则无法使 d3.queue 工作。如果我不使用 d3.queue，只是将一个 d3.json 嵌套在另一个 d3.json 中， map 会显示，但填充问题(如下所述)仍未解决。
  2. 无论有没有 d3.queue，我都无法让美国每个州显示自己的填充颜色。我相信这是因为我未能为每个州创建单独的“容器”。当我将鼠标悬停在浏览器检查器中的“path class = states”容器上时，整个 map 都会突出显示，而不是像预期的那样突出显示单个状态。因此，所有颜色都叠加在一起，但最暗的阴影占主导地位，并且只能看到其中一种颜色。

这是带有d3.queue的版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choropleth Map</title>
<style>

.counties {
  fill: none;
}

.states {
  fill: none;
  stroke: black;
  stroke-linejoin: round;
}

</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>

<script>
var margin = {top: 10, right: 200, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;    
    
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");    
    
var earnings = d3.map();

var path = d3.geo.path();

var x = d3.scale.linear()
    .domain([1, 10])
    .rangeRound([600, 860]);

var color = d3.scale.threshold()
    .domain(d3.range(2, 10))
.range(['#f7fcfd','#e5f5f9','#ccece6','#99d8c9','#66c2a4','#41ae76','#238b45','#006d2c','#00441b']);

// Load data
d3.queue()
    .defer(d3.json, "us.json")
    .defer(d3.json, "median_earnings.json", loadjson) //removing loadjson from here brings up the map of U.S. states without any fill. Keeping it shows a blank page
    .await(ready);

function loadjson (error, earnings) {
    if (error) throw error;
    earnings.forEach(function(d) {
            d.id = +d.id;
            d.median = +d.median_earnings;
    });    
}
    
function ready(error, us) {
  if (error) throw error;

    svg.append("path")
        .attr("class", "states")    
        .datum(topojson.feature(us, us.objects.states), function(a, b) { return a !== b; })
        .attr("d", path);
    
        svg.selectAll("path")
        .attr("class", "states")    
        .datum(earnings)    
        .attr("fill", function(d,i) { 
            return color(d[i].median);
            });
}

        
</script>
</body>
</html>

我使用的us.json文件是here和中位数收入 here .

这是带有 d3.queue 的版本

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Choropleth Map of College Data</title>
<style>

.counties {
  fill: none;
}

.states {
  stroke: #fff;
  stroke-linejoin: round;
}

</style>
</head>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
<script>
var margin = {top: 10, right: 200, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;    
    
var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom);

var earnings = d3.map();

var path = d3.geo.path();

var x = d3.scale.linear()
    .domain([1, 10])
    .rangeRound([600, 860]);

var color = d3.scale.threshold()
    .domain([15000, 18000, 21000, 24000, 27000, 30000, 33000])    .range(['#f7fcfd','#e5f5f9','#ccece6','#99d8c9','#66c2a4','#41ae76','#238b45','#005824']);

d3.json("median_earnings.json", function loadjson(error, earnings) {
    if (error) throw error;
    earnings.forEach(function(d) {
            d.id = +d.id;
            d.median = +d.median_earnings;
            
    d3.json("us.json", function ready(error, us) {
        if (error) throw error;
    
    svg.append("path")
        .attr("class", "states")    
        .datum(topojson.feature(us, us.objects.states, function(a, b) { return a !== b; }))
        .attr("d", path)
        .style("stroke", "grey");
        
    svg.selectAll("path")
        .attr("class", "states")    
        .datum(earnings)    
        .attr("fill", function(d,i) { 
            return color(d[i].median);
            });
    });    
})
});

</script>
</body>
</html>

最佳答案

这是因为您的文件上的 ID 不匹配。

关于javascript - d3 等值线队列和填充问​​题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42470854/

25 4 0
文章推荐： javascript - 使用 JavaScript 的 HTML 选择选项不起作用
文章推荐： c++ - 结束时控制台崩溃(循环)未超出范围错误
文章推荐： c++ - 基数排序需要用 const 值固定吗？
文章推荐： javascript - Leaflet达到minZoom后如何缩小容器？
行者123
个人简介

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

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