Question

example of incorrect map example of correct map 今天编辑，添加了pngs来展示示例。

我很感激这个问题的帮助。下面示例中的颜色显示javascript文件的本地副本没有问题。它是一个更大的显示器的一部分，但我试图将问题缩小到仅仅是一个等级。

我有一个dc.js，crossfilter.js和d3.js choropleth地图的例子，如果我使用javascript库的本地副本，但是当我使用cdn版本时，choropleth无法正确显示并在us-chart上放置一个额外的叠加矩形，d3也只显示地图我故意在两个版本上省略了.css，一个与本地js libs一起使用，另一个使用cdn版本进行显示。具有本地库的那个显示可以没有包含.css文件。可能导致问题的原因是什么？我已经尝试一次放回一个本地版本，看看问题出现在哪个js，但这不起作用。我也尝试过放入每个javascript库的不同版本，但这并没有缩小问题范围。

当我检查控制台中的元素时，带有cdn的元素缺少一个组。当检查具有本地副本的元素的元素时，状态的svg在一个较少的g元素中。这是我能找到的唯一不同的东西。

非常感谢任何帮助。

这是使用库的cdn副本的版本：

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

.background {
  fill: none;
  pointer-events: all;
 }

#states {
  fill: #aaaaaa;
}

#states .active {
  fill: #ff0000;
  fill-opacity: .5;
}

#state-borders {
  fill: none;
  .stroke: #ffffff;
  stroke-width: 1.5px;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
}

path.link {
  fill: none;
  stroke: #666666;
  stroke-width: 1.5px;
}

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

.fill {
  fill: #fff;
}

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

.route {
  fill: none;
  stroke: blue;
  stroke-width: 3px;
}

</style>
<body>
    <h2>
        <span>Map test crossfilter</span>
        <div align=center id="us-chart"><h2>Should see states</h2> </div>
    </h2>

    <script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="http://d3js.org/topojson.v1.min.js"> charset="utf-8"></script>
    <script src="https://cdn.rawgit.com/square/crossfilter/master/crossfilter.js"></script>
    <script src="https://cdn.rawgit.com/dc-js/dc.js/master/dc.js"></script>
    <script>
        var width = 1000,
            height = 600,
            centered,
            newdata = {};

        d3.json("../u-states.json", function(data) {

            d3.csv('test3.csv',function(error,pcorps_data) {

                console.log('data',pcorps_data);
                var volunteersById = {};
                var volunteersByState = {};

                pcorps_data.forEach(function (d) { 
                    volunteersById[+d.id] = +d.volunteers;
                    volunteersByState[d.name] = +d.volunteers;
                });

                console.log("volbyid is", volunteersById);
                console.log("volbystate is", volunteersByState);

                var ndx = crossfilter();
                console.log('the cf container', ndx);
                //ndx.add(pcorps_data);
                ndx.add(newdata);
                console.log('after adding,the cf container', ndx);
                var volunteerstotal = ndx.dimension(function (d) { return d.volunteers;});
                console.log('volunteerstotal',volunteerstotal); // 698 
                var volunteersGroup  = volunteerstotal.group();
                console.log('volgroup',volunteersGroup); // 698 

                var volunteersTop4 = volunteerstotal.top(4);
                var volunteersBot4 = volunteerstotal.bottom(4);
                var allVolunteers = volunteerstotal.top(Infinity); //sorts descending all volunteers
                console.log('allvolun', allVolunteers);
                var canvas = d3.select("body").append("svg")
                    .attr("width", 960)
                    .attr("height", 900);

                var group = canvas.selectAll("g")
                    .data(data.features)
                  .enter()
                    .append("g")

                var projection = d3.geo.albersUsa().scale(600);
                var path = d3.geo.path().projection(projection);

                var color = d3.scale.threshold()
                    .domain([.02, .04, .06, .08, .10]) // <-A
                    .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);

                var areas = group.append("path")
                    .attr("d", path)
                    .style('stroke', 'white')
                    .style('stroke-width', 1)
                    .attr("class","area")
                    .style("fill", function (d) {
                        return color(volunteersById[d.id])
                    });

                    var mapChart = dc.geoChoroplethChart("#us-chart");
                    mapChart.width(1000)
                       .height(330)
                      .dimension(volunteerstotal)
                     .group(volunteersGroup)
                     .colors(d3.scale.linear().domain([0,330000]).range(["pink","red"]))

             .overlayGeoJson(data["features"], "state", function (d) {
                return d.properties.name;
            })
            .projection(d3.geo.albersUsa()
                .scale(600)
                .translate([340, 150]))
                .title(function (p) {

                    return "State: " + p["key"]
                         + "\n"
                         + "Total Volunteers: " + Math.round(p["value"]) +  p[0];
                    })
                 dc.renderAll(); 
             })
        })
    </script>
  </body>
</html>

以下是csv文件的一部分：

state_id,id,category,name,nameloc,volunteers,state,lat,lon
1,53,large,Washington,University of Washington,72,WA,47.6550,-122.3080 
2,55,large,Wisconsin,University of Wisconsin-Madison,69,WI,43.0750,-89.4172

我已经做了很多关于可能出现问题的搜索，但到目前为止还没有找到解决方案。感谢。

等值线颜色显示不正确

0 个答案: