Javascript 如何放置标签并按编号给出颜色范围_Javascript_Csv_D3.js

Javascript 如何放置标签并按编号给出颜色范围

javascript csv d3.js

Javascript 如何放置标签并按编号给出颜色范围,javascript,csv,d3.js,Javascript,Csv,D3.js,我现在使用D3制作我的地理图表。我已经编码显示了我根据csv文件放置的地图和颜色 html页面如下所示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <script src="http://d3js.org/d3.v3.min.js"></script> <style type="text/css"> /* On mouse hov

我现在使用D3制作我的地理图表。我已经编码显示了我根据csv文件放置的地图和颜色

html页面如下所示

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">

/* On mouse hover, lighten state color */
path:hover {
    fill-opacity: .7;
}

/* Style for Custom Tooltip */
div.tooltip {   
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: white;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

/* Legend Font Style */
body {
    font: 11px sans-serif;
}

/* Legend Position Style */
.legend {
    position:absolute;
    left:800px;
    top:350px;
}

</style>
</head>
<body>
<script type="text/javascript">         
//Width and height of map
var width = 960;
var height = 500;   
// D3 Projection
var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    
                   .scale([1000]);         

// Define path generator
var path = d3.geo.path()               
             .projection(projection);      

// Define linear scale for output
var color = d3.scale.linear()
              .range(["blue","red"]);

var legendText = ["Population Present", "Population Absent"]; 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
var div = d3.select("body")
            .append("div")   
            .attr("class", "tooltip")               
            .style("opacity", 0);

// Load in my states data!
d3.csv("Population_education.csv", function(data) {
color.domain([0,1]); // setting the range of the input data
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
    // Grab State Name
    var dataState = data[i].SiteState;
    // Grab data value 
    if(data[i].Population> 0) {
    var dataValue = 1;
    } 
    else { var dataValue = 0;}
    // Find the corresponding state inside the GeoJSON
    for (var j = 0; j < json.features.length; j++)  {
        var jsonState = json.features[j].properties.name;
        if (dataState == jsonState) {
        // Copy the data value into the JSON
        json.features[j].properties.MembersPresent = dataValue;
        // Stop looking through the JSON
        break;
        }

    }
}

// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
    .data(json.features)
    .enter()
    .append("path")
    .attr("d", path)
    .style("stroke", "#fff")
    .style("stroke-width", "1")
    .style("fill", function(d) {
    // Get data value
    var value = d.properties.MembersPresent;
    if (value != undefined) {
    //If value exists…
    return color(value);
    } else {
    //If value is undefined…
    return "rgb(213,222,217)";
    }
});

// Map the cities I have lived in!
d3.csv("Population_education.csv", function(data) {
svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[0];
    })
    .attr("cy", function(d) {
    if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[1];
    })
    .attr("r", function(d) {
        return 3;
    })
        .style("fill", "rgb(217,91,67)")    
        .style("opacity", 0.45) 
    .on("mouseover", function(d) {      
        div.transition()        
           .duration(200)      
           .style("opacity", .9);      
           div.text(d.place)
           .style("left", (d3.event.pageX) + "px")     
           .style("top", (d3.event.pageY - 28) + "px");    
    })   
    .on("mouseout", function(d) {       
        div.transition()        
           .duration(500)      
           .style("opacity", 0);   
    });
});  
var legend = d3.select("body").append("svg")
                .attr("class", "legend")
                .attr("width", 140)
                .attr("height", 200)
                .selectAll("g")
                .data(color.domain().slice().reverse())
                .enter()
                .append("g")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

    legend.append("text")
          .data(legendText)
          .attr("x", 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .text(function(d) { return d; });
    });

});
</script>
</body>
</html>

我的us-states.json如下链接所示

现在我试着做两件事

位置>代码>状态ABBR 和<代码>人口< /代码>作为状态中的一个标签，像在图像中，我需要放置代码和人口号

及

通过检查

population>0

，我用两种颜色表示颜色。但我需要根据CSV文件中的人口数量更改like范围（

从蓝色淡入红色

）

在开始之前，您需要为安排

.json

文件的

循环更新
您需要处理州缩写
和人口
：
// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
    // Grab State Name
    var dataState = data[i].SiteState;
    var dataStateAbbr = data[i]["State Abbr"];

    // Get Population
    var dataPop = data[i].Population;

    // Grab data value 
    if(data[i].Members > 0) {
    var dataValue = 1;
    } 
    else { var dataValue = 0;}
    // Find the corresponding state inside the GeoJSON
    for (var j = 0; j < json.features.length; j++)  {
        var jsonState = json.features[j].properties.name;
        if (dataState == jsonState) {
        // Copy the data value into the JSON
        json.features[j].properties.MembersPresent = dataValue;
        json.features[j].properties.pop = +dataPop;
        json.features[j].properties.abbr = dataStateAbbr;
        // Stop looking through the JSON
        break;
        }

    }
}



着色

只需使用最小和最大填充值更新您的颜色域
：
// Get Max and Min Population and update colorscale
var max = d3.max(json.features, function(d) { return d.properties.pop });
var min = d3.min(json.features, function(d) { return d.properties.pop })

color.domain([min, max]); // setting the range of the input data

最后，在svg中选择All（“path”）
只需根据州人口添加颜色：
.style("fill", function(d) {
            return color(d.properties.pop)
        });


请注意，总体值差异太大，可能是错误的，因此渐变颜色看起来不太好
以下是完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">

/* On mouse hover, lighten state color */
path:hover {
    fill-opacity: .7;
}

/* Style for Custom Tooltip */
div.tooltip {   
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: white;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

/* Legend Font Style */
body {
    font: 11px sans-serif;
}

/* Legend Position Style */
.legend {
    position:absolute;
    left:800px;
    top:350px;
}

</style>
</head>
<body>
<script type="text/javascript">         
//Width and height of map
var width = 960;
var height = 500;   
// D3 Projection
var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    
                   .scale([1000]);         

// Define path generator
var path = d3.geo.path()               
             .projection(projection);      

// Define linear scale for output
var color = d3.scale.linear()
              .range(["blue","red"]);

var legendText = ["Population Present", "Population Absent"]; 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
var div = d3.select("body")
            .append("div")   
            .attr("class", "tooltip")               
            .style("opacity", 0);

// Load in my states data!
d3.csv("Population_education.csv", function(data) {
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {

// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
    // Grab State Name
    var dataState = data[i].SiteState;
    var dataStateAbbr = data[i]["State Abbr"];

    // Get Population
    var dataPop = data[i].Population;

    // Grab data value 
    if(data[i].Members > 0) {
    var dataValue = 1;
    } 
    else { var dataValue = 0;}
    // Find the corresponding state inside the GeoJSON
    for (var j = 0; j < json.features.length; j++)  {
        var jsonState = json.features[j].properties.name;
        if (dataState == jsonState) {
        // Copy the data value into the JSON
        json.features[j].properties.MembersPresent = dataValue;
        json.features[j].properties.pop = +dataPop;
        json.features[j].properties.abbr = dataStateAbbr;
        // Stop looking through the JSON
        break;
        }

    }
}

// Get Max and Min Population and update colorscale
var max = d3.max(json.features, function(d) { return d.properties.pop });
var min = d3.min(json.features, function(d) { return d.properties.pop })

color.domain([min, max]); // setting the range of the input data

// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
    .data(json.features)
    .enter().append("path")
        .attr("d", path)
        .style("stroke", "#fff")
        .style("stroke-width", "1")       
        .style("fill", function(d) {
            return color(d.properties.pop)
        });

var text = svg.selectAll("text")
    .data(json.features)
    .enter().append("text")
        .attr("fill", "black")
        .attr("transform", function(d) { 
            var centroid = path.centroid(d);
            return "translate(" + centroid[0] + "," + centroid[1] + ")"
        })
        .attr("text-anchor", "middle")
        .attr("dy", ".35em")

text.append("tspan")
    .attr("dy", 0)
    .attr("x", 0)
    .text(function(d) {
        return d.properties.abbr;
    })

text.append("tspan")
    .attr("dy", "1.2em") // offest by 1.2 em
    .attr("x", 0)
    .text(function(d) {
        return  d.properties.pop;
    });



// Map the cities I have lived in!
d3.csv("Population_education.csv", function(data) {

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[0];
    })
    .attr("cy", function(d) {
    if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[1];
    })
    .attr("r", function(d) {
        return 3;
    })
        .style("fill", "rgb(217,91,67)")    
        .style("opacity", 0.45) 
    .on("mouseover", function(d) {      
        div.transition()        
           .duration(200)      
           .style("opacity", .9);
           div.html("Tooltip div")
           .style("left", (d3.event.pageX) + "px")     
           .style("top", (d3.event.pageY - 28) + "px");    
    })   
    .on("mouseout", function(d) {       
        div.transition()        
           .duration(500)      
           .style("opacity", 0);   
    });
}); 



var legend = d3.select("body").append("svg")
                .attr("class", "legend")
                .attr("width", 140)
                .attr("height", 200)
                .selectAll("g")
                .data(color.domain().slice().reverse())
                .enter()
                .append("g")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

    legend.append("text")
          .data(legendText)
          .attr("x", 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .text(function(d) { return d; });
    });

});

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
</script>
</body>
</html> 


/*鼠标悬停时，亮显状态颜色*/
路径：悬停{
填充不透明度：.7；
}
/*自定义工具提示的样式*/
div.tooltip{
位置：绝对位置；
文本对齐：居中；
宽度：60px；
高度：28px；
填充：2px；
字体：12px无衬线；
背景：白色；
边界：0px；
边界半径：8px；
指针事件：无；
}
/*图例字体样式*/
身体{
字体：11px无衬线；
}
/*图例位置样式*/
.传奇{
位置：绝对位置；
左：800px；
顶部：350px；
}
//地图的宽度和高度
var宽度=960；
var高度=500；
//D3投影
var projection=d3.geo.albersUsa（）
.translate（[宽度/2，高度/2]）
.比例尺（[1000]）；
//定义路径生成器
var path=d3.geo.path（）
.投影（投影）；
//定义输出的线性比例
var color=d3.scale.linear（）
.范围（[“蓝色”、“红色]）；
var legendText=[“存在人口”、“不存在人口”]；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var div=d3。选择（“主体”）
.附加（“div”）
.attr（“类”、“工具提示”）
.样式（“不透明度”，0）；
//加载我的状态数据！
d3.csv（“人口教育”csv），功能（数据）{
//加载GeoJSON数据并与状态数据合并
d3.json（“us states.json”，函数（json）{
//循环遍历.csv文件中的每个状态数据值
对于（变量i=0；i0）{
var数据值=1；
} 
else{var dataValue=0；}
//在GeoJSON中查找相应的状态
for（var j=0；j.style("fill", function(d) {
            return color(d.properties.pop)
        });

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">

/* On mouse hover, lighten state color */
path:hover {
    fill-opacity: .7;
}

/* Style for Custom Tooltip */
div.tooltip {   
    position: absolute;           
    text-align: center;           
    width: 60px;                  
    height: 28px;                 
    padding: 2px;             
    font: 12px sans-serif;        
    background: white;   
    border: 0px;      
    border-radius: 8px;           
    pointer-events: none;         
}

/* Legend Font Style */
body {
    font: 11px sans-serif;
}

/* Legend Position Style */
.legend {
    position:absolute;
    left:800px;
    top:350px;
}

</style>
</head>
<body>
<script type="text/javascript">         
//Width and height of map
var width = 960;
var height = 500;   
// D3 Projection
var projection = d3.geo.albersUsa()
                   .translate([width/2, height/2])    
                   .scale([1000]);         

// Define path generator
var path = d3.geo.path()               
             .projection(projection);      

// Define linear scale for output
var color = d3.scale.linear()
              .range(["blue","red"]);

var legendText = ["Population Present", "Population Absent"]; 
var svg = d3.select("body")
            .append("svg")
            .attr("width", width)
            .attr("height", height);
var div = d3.select("body")
            .append("div")   
            .attr("class", "tooltip")               
            .style("opacity", 0);

// Load in my states data!
d3.csv("Population_education.csv", function(data) {
// Load GeoJSON data and merge with states data
d3.json("us-states.json", function(json) {

// Loop through each state data value in the .csv file
for (var i = 0; i < data.length; i++) {
    // Grab State Name
    var dataState = data[i].SiteState;
    var dataStateAbbr = data[i]["State Abbr"];

    // Get Population
    var dataPop = data[i].Population;

    // Grab data value 
    if(data[i].Members > 0) {
    var dataValue = 1;
    } 
    else { var dataValue = 0;}
    // Find the corresponding state inside the GeoJSON
    for (var j = 0; j < json.features.length; j++)  {
        var jsonState = json.features[j].properties.name;
        if (dataState == jsonState) {
        // Copy the data value into the JSON
        json.features[j].properties.MembersPresent = dataValue;
        json.features[j].properties.pop = +dataPop;
        json.features[j].properties.abbr = dataStateAbbr;
        // Stop looking through the JSON
        break;
        }

    }
}

// Get Max and Min Population and update colorscale
var max = d3.max(json.features, function(d) { return d.properties.pop });
var min = d3.min(json.features, function(d) { return d.properties.pop })

color.domain([min, max]); // setting the range of the input data

// Bind the data to the SVG and create one path per GeoJSON feature
svg.selectAll("path")
    .data(json.features)
    .enter().append("path")
        .attr("d", path)
        .style("stroke", "#fff")
        .style("stroke-width", "1")       
        .style("fill", function(d) {
            return color(d.properties.pop)
        });

var text = svg.selectAll("text")
    .data(json.features)
    .enter().append("text")
        .attr("fill", "black")
        .attr("transform", function(d) { 
            var centroid = path.centroid(d);
            return "translate(" + centroid[0] + "," + centroid[1] + ")"
        })
        .attr("text-anchor", "middle")
        .attr("dy", ".35em")

text.append("tspan")
    .attr("dy", 0)
    .attr("x", 0)
    .text(function(d) {
        return d.properties.abbr;
    })

text.append("tspan")
    .attr("dy", "1.2em") // offest by 1.2 em
    .attr("x", 0)
    .text(function(d) {
        return  d.properties.pop;
    });



// Map the cities I have lived in!
d3.csv("Population_education.csv", function(data) {

svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", function(d) {
        if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[0];
    })
    .attr("cy", function(d) {
    if (d.AvgLng != 0 && d.AvgLat != 0)
        return projection([d.AvgLng, d.AvgLat])[1];
    })
    .attr("r", function(d) {
        return 3;
    })
        .style("fill", "rgb(217,91,67)")    
        .style("opacity", 0.45) 
    .on("mouseover", function(d) {      
        div.transition()        
           .duration(200)      
           .style("opacity", .9);
           div.html("Tooltip div")
           .style("left", (d3.event.pageX) + "px")     
           .style("top", (d3.event.pageY - 28) + "px");    
    })   
    .on("mouseout", function(d) {       
        div.transition()        
           .duration(500)      
           .style("opacity", 0);   
    });
}); 



var legend = d3.select("body").append("svg")
                .attr("class", "legend")
                .attr("width", 140)
                .attr("height", 200)
                .selectAll("g")
                .data(color.domain().slice().reverse())
                .enter()
                .append("g")
                .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

    legend.append("rect")
          .attr("width", 18)
          .attr("height", 18)
          .style("fill", color);

    legend.append("text")
          .data(legendText)
          .attr("x", 24)
          .attr("y", 9)
          .attr("dy", ".35em")
          .text(function(d) { return d; });
    });

});

function wrap(text, width) {
  text.each(function() {
    var text = d3.select(this),
        words = text.text().split(/\s+/).reverse(),
        word,
        line = [],
        lineNumber = 0,
        lineHeight = 1.1, // ems
        y = text.attr("y"),
        dy = parseFloat(text.attr("dy")),
        tspan = text.text(null).append("tspan").attr("x", 0).attr("y", y).attr("dy", dy + "em");
    while (word = words.pop()) {
      line.push(word);
      tspan.text(line.join(" "));
      if (tspan.node().getComputedTextLength() > width) {
        line.pop();
        tspan.text(line.join(" "));
        line = [word];
        tspan = text.append("tspan").attr("x", 0).attr("y", y).attr("dy", ++lineNumber * lineHeight + dy + "em").text(word);
      }
    }
  });
}
</script>
</body>
</html>