Question

正如我的用户名所示，我正在学习d3.js，使用Scott Murray出色的书。作为一项练习，我试图创建一个等值区（非常类似于他的书中使用的那个），并提供一些关于美国辍学率的公开数据。我有两个单独的csv，一个是来自一组学生的数据，另一个是具有不同组的数据。我希望数据在点击时从一个csv更新到另一个csv。除了值名称（DRPHI与DRPBL），csvs的名称和值本身之外，它们是相同的。但是，点击更新不起作用 - 没有任何反应。我错过了一些非常基本的东西吗？如果我是，我道歉。非常感谢您的参与。我的代码（非常基于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>

Answer 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属性）保持不变。

d3.js - 根据新的.csv更新等值线数据？

1 个答案: