D3 Map + Graph Coordinated Visualization：选择错误的国家/地图更改属性

【问题标题】：D3 Map + Graph Coordinated Visualization: selecting wrong countries / map changing attributesD3 Map + Graph Coordinated Visualization：选择错误的国家/地图更改属性
【发布时间】：2018-08-07 20:25:38
【问题描述】：

这是我的问题：我有一个地图 SVG 和一个条形图 SVG。我想创建一个协调的选择。例如，用户在图表中突出显示一个条形，地图上与该数据对应的国家也被突出显示，反之亦然。

现在我可以突出显示地图上的任何国家，相应的栏也会突出显示。但是，这对酒吧不起作用。当我突出显示一个条形时，会突出显示一个随机国家，然后显示在工具提示中的国家名称都是混乱和错误的。

这是地图 -> 条形图突出显示：

...
           map.selectAll("countries")
                .data(b.features)
                .enter()
                .append("path")
                .attr("d", path)
                //.style("stroke", "black")
                .on("mouseover", function(d) { 
                    activeDistrict = d.properties.ADMIN,
                    chart.selectAll("rect")
                    .each(function(d) {
                        if(d){

                            if (d.Country == activeDistrict){
                                console.log("confirmed" + d.Country)
                                d3.select(this).style("stroke", "blue").style("stroke-width", "3");

                            }
                        }
                    })

...

这是条形图 -> 地图突出显示。这是我无法正常运行的功能。

            var bars = chart.selectAll(".bars")
                .data(data)
                .enter()
                .append("rect")
                .on("mouseover", function(d) {
                    activeDistrict = d.Country,
                    //console.log(activeDistrict),
                    map.selectAll("path")
                    .data(b.features)
                    .each(function(d) {
                        if (d){
                            //console.log("activeDistrict = " + activeDistrict)
                            if (d.properties.ADMIN == activeDistrict){
                                d3.select(this).style("stroke", "blue").style("stroke-width", "3");
                                console.log(d.properties.ADMIN + "=" + activeDistrict)

                            }
                        }
                    });

这是我的整个 JS：

<script>
window.onload = setMap();
function setMap(){  



d3.csv("/data/blah.csv").then(function(data) {
        //console.log(data);
d3.json("/data/blah.topojson").then(function(data2) {
        //console.log(data2);
//Code with data here
    var width = window.innerWidth * 0.5, // 960
        height = 460;
    var activeDistrict;
    //chart vars
    var chartWidth = window.innerWidth * 0.425,
            chartHeight = 473,
            leftPadding = 25,
            rightPadding = 2,
            topBottomPadding = 5,
            chartInnerWidth = chartWidth - leftPadding - rightPadding,
            chartInnerHeight = chartHeight - topBottomPadding * 2,
            translate = "translate(" + leftPadding + "," + topBottomPadding + ")";
     var yScale = d3.scaleLinear()
            .range([0, chartHeight])
            .domain([0, 2000]); 

    //create new svg container for the map
    var map = d3.select("body")
        .append("svg")
        .attr("class", "map")
        .attr("width", width)
        .attr("height", height);

    //create new svg container for the chart
    var chart = d3.select("body")
        .append("svg")
        .attr("width", chartWidth)
        .attr("height", chartHeight)
        .attr("class", "chart");

    //create Albers equal area conic projection centered on France
    var projection = d3.geoNaturalEarth1()
        .center([0, 0])
        .rotate([-2, 0, 0])
        //.parallels([43, 62])
        .scale(175)
        .translate([width / 2, height / 2]);
    var path = d3.geoPath()
        .projection(projection);
       //translate TopoJSON
    d3.selectAll(".boundary")
    .style("stroke-width", 1 / 1);

    var b = topojson.feature(data2, data2.objects.ne_10m_admin_0_countries);
    //console.log(b)
    //console.log(b.features[1].properties.ADMIN) //country name
    var graticule = d3.geoGraticule();

    var attrArray = ["blah blah blah"];

    function joinData(b, data){
    //loop through csv to assign each set of csv attribute values to geojson region
        for (var i=0; i<data.length; i++){
            var csvRegion = data[i]; //the current region
            var csvKey = data[i].Country; //the CSV primary key
              //console.log(data[i].Country)
        //loop through geojson regions to find correct region
            for (var a=0; a<b.features.length; a++){     
                var geojsonProps = b.features[a].properties; //gj props
                var geojsonKey = geojsonProps.ADMIN; //the geojson primary key
                //where primary keys match, transfer csv data to geojson properties object
                if (geojsonKey == csvKey){
                    //assign all attributes and values
                    attrArray.forEach(function(attr){
                        var val = parseFloat(csvRegion[attr]); //get csv attribute value
                        geojsonProps[attr] = val; //assign attribute and value to geojson properties
                    });
                };

            };
        };
        return b;
  };
    joinData(b,data);


    var tooltip = d3.select("body").append("div") 
        .attr("class", "tooltip")       
        .style("opacity", 0);

    //Dynamically Call the current food variable to change the map
    var currentFood = "Beef2";


    var valArray = [];
    data.forEach(function(element) {
        valArray.push(parseInt(element[currentFood]));
    });

    var currentMax = Math.max.apply(null, valArray.filter(function(n) { return !isNaN(n); }));
    console.log("Current Max Value is " + currentMax + " for " + currentFood)



    var color = d3.scaleQuantile()
        .domain(d3.range(0, (currentMax + 10)))
        .range(d3.schemeReds[7]); 




    function drawMap(currentMax){

        d3.selectAll("path").remove();
        // Going to need to do this dynamically
        // Set to ckmeans
        var color = d3.scaleQuantile()
            .domain(d3.range(0, currentMax))
            .range(d3.schemeReds[7]);  

        //console.log(b[1].Beef1)


        map.append("path")
            .datum(graticule)
            .attr("class", "graticule")
            .attr("d", path);

        map.append("path")
            .datum(graticule.outline)
            .attr("class", "graticule outline")
            .attr("d", path);


    console.log(map.selectAll("path").size())

       map.selectAll("countries")
            .data(b.features)
            .enter()
            .append("path")
            .attr("d", path)
            //.style("stroke", "black")
            .on("mouseover", function(d) { 
                activeDistrict = d.properties.ADMIN,
                chart.selectAll("rect")
                .each(function(d) {
                    if(d){
                        //console.log("activeDistrict = " + activeDistrict)
                        if (d.Country == activeDistrict){
                            console.log("confirmed" + d.Country)
                            d3.select(this).style("stroke", "blue").style("stroke-width", "3");

                        }
                    }
                })
                tooltip.transition()    //(this.parentNode.appendChild(this))
                .duration(200)    
                .style("opacity", .9)
                .style("stroke-opacity", 1.0);    
                tooltip.html(d.properties.ADMIN + "<br/>"  + d.properties[currentFood] + "(kg/CO2/Person/Year)")  
                .style("left", (d3.event.pageX) + "px")   
                .style("top", (d3.event.pageY - 28) + "px");
              })          
              .on("mouseout", function(d) {
                activeDistrict = d.properties.ADMIN,
                chart.selectAll("rect")
                .each(function(d) {
                    if (d){
                        //console.log("activeDistrict = " + activeDistrict)
                        if (d.Country == activeDistrict){
                            d3.select(this).style("stroke", "none").style("stroke-width", "0");

                        }
                    }
                })
                tooltip.transition()    
                .duration(500)    
                .style("opacity", 0)
                .style("stroke-opacity", 0); 
              })
            .style("fill", function(d) { return color(d.properties[currentFood]) });
    };

    drawMap(currentMax);
    console.log("sum", d3.sum(valArray))
    //console.log(map.selectAll("path")._groups[0][200].__data__.properties.ADMIN)

    function setChart(data, data2, currentMax, valArray){

        d3.selectAll("rect").remove();
        d3.selectAll("text").remove();

        var color = d3.scaleQuantile()
            .domain(d3.range(0, (currentMax + 10)))
            .range(d3.schemeReds[7]); 
        var chartBackground = chart.append("rect2")
            .attr("class", "chartBackground")
            .attr("width", chartInnerWidth)
            .attr("height", chartInnerHeight)
            .attr("transform", translate);

        var yScale = d3.scaleLinear()
            .range([0, chartHeight])
            .domain([0, (currentMax+10)]);

        var chartTitle = chart.append("text")
            .attr("x", 20)
            .attr("y", 40)
            .attr("class", "chartTitle")
            .text(currentFood.slice(0, -1));
        var chartSub = chart.append("text")
            .attr("x", 20)
            .attr("y", 90)
            .attr("class", "chartSub")
            .text((d3.sum(valArray)*76) + " Billion  World Total");

            // Place Axis at some point
        var bars = chart.selectAll(".bars")
            .data(data)
            .enter()
            .append("rect")
            .on("mouseover", function(d) {
                activeDistrict = d.Country,
                //console.log(activeDistrict),
                map.selectAll("path")
                .data(b.features)
                .each(function(d) {
                    if (d){
                        //console.log("activeDistrict = " + activeDistrict)
                        if (d.properties.ADMIN == activeDistrict){
                            d3.select(this).style("stroke", "blue").style("stroke-width", "3");
                            console.log(d.properties.ADMIN + "=" + activeDistrict)

                        }
                    }
                });
                tooltip.transition()    //(this.parentNode.appendChild(this))
                .duration(200)    
                .style("opacity", .9)
                .style("stroke-opacity", 1.0);    
                tooltip.html(d.Country + "<br/>"  + d[currentFood] + "(kg/CO2/Person/Year)")  
                .style("left", (d3.event.pageX) + "px")   
                .style("top", (d3.event.pageY - 28) + "px");  
              })          
              .on("mouseout", function(d) {  
                map.selectAll("path")
                .data(b.features)
                .each(function(d) {
                    if (d){
                        //console.log("activeDistrict = " + activeDistrict)
                        if (d.properties.ADMIN == activeDistrict){
                            d3.select(this).style("stroke", "none").style("stroke-width", "0");
                            console.log(d.properties.ADMIN + "=" + activeDistrict)

                        }
                    }
                });
                tooltip.transition()    
                .duration(500)    
                .style("opacity", 0)
                .style("stroke-opacity", 0); 
              })
            .sort(function(a, b){
            return a[currentFood]-b[currentFood]
            })
            .transition() //add animation
                .delay(function(d, i){
                    return i * 5
                })
                .duration(1)
            .attr("class", function(d){
                return "bars" + d.Country;
            })
            .attr("width", chartWidth / data.length - 1)
            .attr("x", function(d, i){
                return i * (chartWidth / data.length);
            })
            .attr("height", function(d){
                return yScale(parseFloat(d[currentFood]));
            })
            .attr("y", function(d){
                return chartHeight - yScale(parseFloat(d[currentFood]));
            })
            .style("fill", function(d){ return color(d[currentFood]); }); 

    };

    setChart(data, data2, currentMax, valArray);  

    function createDropdown(data){
        //add select element
        var dropdown = d3.select("body")
            .append("select")
            .attr("class", "dropdown")
            .on("change", function(){
            changeAttribute(this.value, data)
            });

        //add initial option
        var titleOption = dropdown.append("option")
            .attr("class", "titleOption")
            .attr("disabled", "true")
            .text("Select Attribute");

        //add attribute name options
        var attrOptions = dropdown.selectAll("attrOptions")
            .data(attrArray)
            .enter()
            .append("option")
            .attr("value", function(d){ return d })
            .text(function(d){ return d });
    };
    createDropdown(data);

    function changeAttribute(attribute, data){
        //change the expressed attribute
        currentFood = attribute;
        var valArray = [];
        data.forEach(function(element) {
            valArray.push(parseInt(element[currentFood]));
        });

        var currentMax = Math.max.apply(null, valArray.filter(function(n) { return !isNaN(n); }));
        console.log("Current Max Value is " + currentMax + " for " + currentFood)

        // Set a dynamic color range

        var color = d3.scaleQuantile()
            .domain(d3.range(0, currentMax))
            .range(d3.schemeReds[7]); 

        //recolor enumeration units
        drawMap(currentMax);
        //reset chart bars
        setChart(data, data2, currentMax, valArray);

    };

}); //csv
}); //json



}; // end of setmap

【问题讨论】：

    标签： javascript d3.js topojson


    【解决方案1】：

    最初绘制国家时，您使用：

    map.selectAll("countries")
  .data(b.features)
  .enter()
  .append("path")

    由于您的页面上没有带有标签countries 的元素，初始选择为空，.enter().append("path") 为数据数组中的每个项目创建一个路径。

    但是，当您在条形上进行鼠标悬停时，您会使用 selectAll().data() 序列重新分配数据，但您的做法会有所不同：

    map.selectAll("path")
  .data(b.features)
  ...

    您的地图中有一些不是国家/地区的路径：标线和轮廓。现在我们已经选择了所有路径并为它们分配了新数据。由于选择中的前两项是格线和轮廓，因此它们现在具有数据数组中前两项的数据。所有国家都将在数据数组中拥有距离它们两个国家的绑定数据。这就是为什么当鼠标悬停在条形上时错误的数据会突出显示，然后国家工具提示错误的原因。

    不清楚为什么要更新数据（我认为它没有改变），您可以这样附加国家：

    var countries = map.selectAll("countries")
  .data(b.features)
  .enter()
  .append("path")
  ... continue as before

    或

    map.selectAll("countries")
  .data(b.features)
  .enter()
  .append("path")
  .attr("class","country")
  ... continue as before

    然后在鼠标悬停功能栏使用：

    countries.each(....

    或

    map.selectAll(".country").each(...

    如果需要，无论哪种方式，您都可以使用.data() 更新数据。

    我会注意到each 方法不是必需的，但在某些情况下可能更可取，看起来你可以使用：

    var bars = chart.selectAll(".bars")
  .data(data)
  .enter()
  .append("rect")
  .on("mouseover", function(d) {
     activeDistrict = d.Country,       
     map.selectAll(".country")
       .data(b.features)
       .style("stroke", function(d) { 
         if (d.properties.ADMIN == activeDistrict) return "blue"; else return color(d.properties[currentFood]) 
       })
       .style("stroke-width", function(d) { 
         if (d.properties.ADMIN == activeDistrict) return "3" else return 0; 
       });
  })                          
  ...

    【讨论】：

      【解决方案2】：

      您可以尝试以下方法，以使您创建的内容和选择的内容更加一致。

      地图：

      • 按类选择，因为 svg 中有更多 path

      • 向栏添加一个类以突出显示而不是设置样式

           map.selectAll(".countries")
        .data(b.features)
        .enter()
        .append("path")
        .attr("class", "countries")
        .attr("d", path)
        //.style("stroke", "black")
        .on("mouseover", function(d) { 
            activeDistrict = d.properties.ADMIN,
            chart.selectAll(".bars")
                 .classed("highlight", function(d) {
                     return d && d.Country === activeDistrict;
                  });
            tooltip.transition()    //(this.parentNode.appendChild(this))
            .duration(200)    
            .style("opacity", .9)
            .style("stroke-opacity", 1.0);    
            tooltip.html(d.properties.ADMIN + "<br/>"  + d.properties[currentFood] + "(kg/CO2/Person/Year)")  
            .style("left", (d3.event.pageX) + "px")   
            .style("top", (d3.event.pageY - 28) + "px");
          })          
          .on("mouseout", function(d) {
            activeDistrict = d.properties.ADMIN,
            chart.selectAll(".bars")
                 .classed("highlight", false);
            tooltip.transition()    
            .duration(500)    
            .style("opacity", 0)
            .style("stroke-opacity", 0); 
          })
        .style("fill", function(d) { return color(d.properties[currentFood]) });
};

      绘制条形

      • 修复类，在bars和country之间添加一个空格
      • 不要在鼠标悬停和鼠标移出时将新数据绑定到地图路径
      • 按类而不是按类型选择地图路径

      • 向地图路径添加一个类以突出显示而不是设置样式

            var bars = chart.selectAll(".bars")
        .data(data)
        .enter()
        .append("rect")
        .on("mouseover", function(d) {
            activeDistrict = d.Country;
            //console.log(activeDistrict),
            map.selectAll(".countries")
                .classed("highlight", function(d) {
                    return d && d.properties.ADMIN === activeDistrict;
                 });
            tooltip.transition()    //(this.parentNode.appendChild(this))
            .duration(200)    
            .style("opacity", .9)
            .style("stroke-opacity", 1.0);    
            tooltip.html(d.Country + "<br/>"  + d[currentFood] + "(kg/CO2/Person/Year)")  
            .style("left", (d3.event.pageX) + "px")   
            .style("top", (d3.event.pageY - 28) + "px");  
          })          
          .on("mouseout", function(d) {  
            map.selectAll(".countries")
               .classed("highlight", false);
            tooltip.transition()    
            .duration(500)    
            .style("opacity", 0)
            .style("stroke-opacity", 0); 
          })
        .sort(function(a, b){
        return a[currentFood]-b[currentFood]
        })
        .transition() //add animation
            .delay(function(d, i){
                return i * 5
            })
            .duration(1)
        .attr("class", function(d){
            return "bars " + d.Country;
        })
        .attr("width", chartWidth / data.length - 1)
        .attr("x", function(d, i){
            return i * (chartWidth / data.length);
        })
        .attr("height", function(d){
            return yScale(parseFloat(d[currentFood]));
        })
        .attr("y", function(d){
            return chartHeight - yScale(parseFloat(d[currentFood]));
        })
        .style("fill", function(d){ return color(d[currentFood]); });

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2021-10-17
        • 2011-04-25
        • 1970-01-01
        • 1970-01-01
        • 2016-01-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode