d3.js - 根据新的 .csv 更新 choropleth 中的数据？答案

【问题标题】：d3.js - updating data in choropleth based on new .csv?d3.js - 根据新的 .csv 更新 choropleth 中的数据？
【发布时间】：2014-01-24 00:40:57
【问题描述】：

正如我的用户名所暗示的，我正在学习 d3.js，使用的是 Scott Murray 的优秀书籍。作为一个练习，我正在尝试创建一个等值线（与他书中使用的非常相似），其中包含一些关于美国辍学率的公开数据。我有两个单独的 csv，一个包含一组学生的数据，另一个包含不同组的数据。我希望通过单击将数据从一个 csv 更新为另一个数据。除了值名称（DRPHI 与 DRPBL）、csv 名称和值本身之外，它们是相同的。但是，点击更新不起作用 - 没有任何反应。我在这里错过了一些非常基本的东西吗？如果我是的话，我很抱歉。非常感谢您的参与。我的代码（很大程度上基于 Murray 的代码）在这里：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3: Setting path fills dynamically to generate a choropleth</title>
        <script type="text/javascript" src="../d3/d3.v3.js"></script>
        <style type="text/css">
        </style>
    </head>
    <body>
    <p>Click on this text to update the chart with values for another set of students.</p>
        <script type="text/javascript">

            var w = 500;
            var h = 300;

            var projection = d3.geo.albersUsa()
                                   .translate([w/2, h/2])
                                   .scale([500]);

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

            var color = d3.scale.quantize()
                                .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                                //Colors taken from colorbrewer.js, included in the D3 download

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

            d3.csv("1_dropout_by_state.csv", function(data) {

                color.domain([
                    d3.min(data, function(d) { return d.DRPHI; }), 
                    d3.max(data, function(d) { return d.DRPHI; })
                ]);

                d3.json("us-states.json", function(json) {

                    for (var i = 0; i < data.length; i++) {

                        var dataState = data[i].state;

                        var dataValue = parseFloat(data[i].DRPHI);

                        for (var j = 0; j < json.features.length; j++) {

                            var jsonState = json.features[j].properties.name;

                            if (dataState == jsonState) {

                                json.features[j].properties.value = dataValue;

                                break;

                            }
                        }       
                    }

                    svg.selectAll("path")
                       .data(json.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .style("fill", function(d) {
                            var value = d.properties.value;

                            if (value) {
                                return color(value);
                            } else {
                                return "#ccc";
                            }
                       });

                });

            });

            d3.select("p")
                .on("click", function() {
                    d3.csv("2_dropout_by_state.csv", function(data) {

                color.domain([
                    d3.min(data, function(d) { return d.DRPBL; }), 
                    d3.max(data, function(d) { return d.DRPBL; })
                ]);

                d3.json("us-states.json", function(json) {

                    for (var i = 0; i < data.length; i++) {

                        var dataState = data[i].state;

                        var dataValue = parseFloat(data[i].DRPBL);

                        for (var j = 0; j < json.features.length; j++) {

                            var jsonState = json.features[j].properties.name;

                            if (dataState == jsonState) {

                                json.features[j].properties.value = dataValue;

                                break;

                            }
                        }       
                    }

                    svg.selectAll("path")
                       .data(json.features)
                       .enter()
                       .append("path")
                       .attr("d", path)
                       .style("fill", function(d) {
                            var value = d.properties.value;

                            if (value) {
                                return color(value);
                            } else {
                                return "#ccc";
                            }
                       });

                });

            });
         });


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

【问题讨论】：

标签： d3.js

【解决方案1】：

由于 D3 的选择工作方式，您看不到任何事情发生。 This tutorial 可能有助于了解发生了什么。

简而言之，您在显示其他数据的函数中选择了所有现有的path 元素：

svg.selectAll("path")

并将数据绑定到它们：

.data(json.features)

此数据与您之前绑定到元素的数据完全相同。现在 D3 通过将数据元素与 DOM 元素匹配来计算其连接。由于您之前使用过相同的数据，因此一切都完美匹配。因此，.enter() 选择为空。因为这是您唯一操作的东西，所以什么都不会发生。

要做你想做的事，你不需要追加新元素——绑定新数据和更新就足够了。这是您应该需要的所有代码：

svg.selectAll("path")
                   .style("fill", function(d) {
                        var value = d.properties.value;

                        if (value) {
                            return color(value);
                        } else {
                            return "#ccc";
                        }
                   });

唯一需要更新的是填充颜色，因此这是您需要在代码中处理的唯一内容。路径本身（d 属性）保持原样。

【讨论】：