Fatal编程技术网
  • javascript/
  • Javascript { 边缘顶部：50px； } #德廷福{ 边缘顶部：30px； } .部门{ 光标：指针； 笔画：黑色； 笔划宽度：.5px； } .部门：悬停{ 笔画宽度：2px； } 分区工具提示{ 位置：绝对位置； 不透明度：0.8； z指数：1000； 文本对齐：

Javascript { 边缘顶部：50px； } #德廷福{ 边缘顶部：30px； } .部门{ 光标：指针； 笔画：黑色； 笔划宽度：.5px； } .部门：悬停{ 笔画宽度：2px； } 分区工具提示{ 位置：绝对位置； 不透明度：0.8； z指数：1000； 文本对齐：

javascript d3.js

Javascript { 边缘顶部：50px； } #德廷福{ 边缘顶部：30px； } .部门{ 光标：指针； 笔画：黑色； 笔划宽度：.5px； } .部门：悬停{ 笔画宽度：2px； } 分区工具提示{ 位置：绝对位置； 不透明度：0.8； z指数：1000； 文本对齐：,javascript,d3.js,geojson,Javascript,D3.js,Geojson,{ 边缘顶部：50px； } #德廷福{ 边缘顶部：30px； } .部门{ 光标：指针； 笔画：黑色； 笔划宽度：.5px； } .部门：悬停{ 笔画宽度：2px； } 分区工具提示{ 位置：绝对位置； 不透明度：0.8； z指数：1000； 文本对齐：左对齐； 边界半径：4px； -moz边界半径：4px； -webkit边界半径：4px； 填充：8px； 颜色：#fff； 背景色：#000； 字体：12px无衬线； 最大宽度：300px； 高度：40px； } #svg{ 显示：块； 保证

{ 边缘顶部：50px； } #德廷福{ 边缘顶部：30px； } .部门{ 光标：指针； 笔画：黑色； 笔划宽度：.5px； } .部门：悬停{ 笔画宽度：2px； } 分区工具提示{ 位置：绝对位置； 不透明度：0.8； z指数：1000； 文本对齐：左对齐； 边界半径：4px； -moz边界半径：4px； -webkit边界半径：4px； 填充：8px； 颜色：#fff； 背景色：#000； 字体：12px无衬线； 最大宽度：300px； 高度：40px； } #svg{ 显示：块； 保证金：自动； } 常数宽度=850， 高度=800， 这些颜色的颜色是，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，，]； const path=d3.geoPath（）； 常量投影=d3.geoMercator（） .中心（[2.332978,48.860117]） .规模（40000） .翻译（[宽度/2，高度/2]）； 路径.投影（投影）； const svg=d3.select（“#map”）.append（“svg”） .attr（“id”、“svg”） .attr（“宽度”，宽度） .attr（“高度”，高度） .attr（“类”、“蓝色”）； //附加将包含路径的组 const deps=svg.append（“g”）； var承诺=[]； promises.push（d3.json）https://raw.githubusercontent.com/cerezamo/dataviz/master/Graphique_bokeh/pop_comgeo.geojson')) promises.push（d3.csv（“https://raw.githubusercontent.com/cerezamo/dataviz/master/variables.csv")) 承诺。所有（承诺）。然后（函数（值）{ const geojson=值[0]； const csv=值[1]； geojson.features=geojson.features.filter（函数（d）{ 返回d.properties.year==1962； }) var功能=deps .selectAll（“路径”） .data（geojson.features） .输入（） .append（“路径”） .attr（'id'，函数（d）{ 返回“d”+d.properties.insee； })//将id创建为（例如：“d75005”） //我添加了一个d，因此id不是一个纯数字，因为它在选择它时可能会产生错误 .attr（“d”，路径）； 变量分位数=d3.scaleQuantile（） .domain（[0，d3.max（csv，函数（e））{ return+e.densitehabkm2； })]) .范围（颜色）； var legend=svg.append（'g'） .attr（'transform'，'translate（725150）'）） .attr（'id'，'legend'）； legend.selectAll（） .数据（d3.范围（颜色.长度）） .enter（）.append（'svg:rect'） .attr（'height'，'20px'） .attr（'width'，'20px'） .attr（'x'，5） .attr（'y'，函数（d）{ 返回d*20； }) .样式（“填充”，功能（d）{ 返回颜色[d]； }); var legendScale=d3.scaleLinear（） .domain（[0，d3.max（csv，函数（e））{ return+e.densitehabkm2； })]) .范围（[0，colors.length*20]）； var legendAxis=svg.append（“g”） .attr（'transform'，'translate（750150）' .呼叫（d3.axisRight（legendScale）.ticks（3））； csv.forEach（函数（e，i）{ d3.选择（（（“path#d”+e.insee））//我认为问题所在的行 //在这里，我试图选择Id使用相同的代码，但在csv文件中读取它 .style（“填充”，函数（）{ 返回分位数（+e.densitehabkm2）； }) .on（“鼠标悬停”，功能（d）{ 控制台日志（d）； 过渡部（） .持续时间（200） .样式（“不透明度”，.9）； div.html（“IZI”） .style（“左”（d3.event.pageX+30）+“px”） .style（“top”，（d3.event.pageY-30）+“px”）； }) .开启（“鼠标出”，功能（d）{ div.style（“不透明度”，0）； div.html（“”） .样式（“左”，“500像素”） .样式（“顶部”，“-500px”）； }); }); //console.log（csv.insee）； }); //为工具提示追加一个DIV var div=d3.选择（“主体”）.追加（“div”） .attr（“类”、“工具提示”） .样式（“不透明度”，0）；
首次创建地图对象时，将
.attr（'fill'，'none'）
添加到。它的自动填充黑色，并以某种方式防止您的颜色以后：它的工作非常感谢！答案比我想象的要简单得多：）不幸的是，这不是答案。@GerardoFurtado为什么不呢？“这看起来像一个答案。”达曼看一下我的答案。
.attr（'fill'，'none'）
所做的唯一一件事就是使所有堆叠路径都不着色，因此当OP选择其中任何一条路径时，它都将可见。但其他（未着色）路径仍在其上方。 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
 <head>
 <meta charset="utf-8">

 <title>All in One</title>

 <script src="https://d3js.org/d3.v5.min.js"></script>

 <style type="text/css">
   #info {
     margin-top: 50px;
   }

   #deptinfo {
     margin-top: 30px;
   }

   .department {
     cursor: pointer;
     stroke: black;
     stroke-width: .5px;
   }

   .department:hover {
     stroke-width: 2px;
   }

  div.tooltip {
    position: absolute;
    opacity:0.8;
    z-index:1000;
    text-align:left;
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    padding:8px;
    color:#fff;
    background-color:#000;
    font: 12px sans-serif;
    max-width: 300px;
    height: 40px;
  }

  #svg {
    display: block;
    margin: auto;
  }
</style>
 </head>
   <body>
     <div id="map"></div>
   </body>
 </html>

 <script type="text/javascript"> 
   const width = 850, 
   const height = 800,
   colors = ['#d4eac7', '#c6e3b5', '#b7dda2', '#a9d68f', '#9bcf7d', '#8cc86a', '#7ec157', '#77be4e', '#70ba45', '#65a83e', '#599537', '#4e8230', '#437029', '#385d22', '#2d4a1c', '#223815'];

 const path = d3.geoPath();

 const projection = d3.geoMercator()
 .center([2.332978, 48.860117])
 .scale(40000)
 .translate([width / 2, height / 2]);

 path.projection(projection);

 const svg = d3.select('#map').append("svg")
 .attr("id", "svg")
 .attr("width", width)
 .attr("height", height)
 .attr("class", "Blues");

 // Append the group that will contain our paths
 const deps = svg.append("g");

 var promises = []; 


promises.push(d3.json('https://raw.githubusercontent.com/cerezamo/dataviz/master/Graphique_bokeh/pop_comgeo.geojson'))

promises.push(d3.csv("https://raw.githubusercontent.com/cerezamo/dataviz/master/variables.csv"))

Promise.all(promises).then(function(values){
 const geojson = values[0];
 const csv = values[1];


var features = deps
 .selectAll("path")
 .data(geojson.features)
 .enter()
 .append("path")
 .attr('id', function(d) {return "d" + d.properties.insee;})// Creation of the id as (ex :"d75005")
 // I add a d so the id is not a pure number as it could create error when selecting it
 .attr("d", path);

var quantile = d3.scaleQuantile()
 .domain([0, d3.max(csv, function(e) { return + e.densitehabkm2; })])
 .range(colors);

var legend = svg.append('g')
 .attr('transform', 'translate(725, 150)')
 .attr('id', 'legend');

  legend.selectAll()
   .data(d3.range(colors.length))
   .enter().append('svg:rect')
     .attr('height', '20px')
     .attr('width', '20px')
     .attr('x', 5)
     .attr('y', function(d) { return d * 20; })
     .style("fill", function(d) { return colors[d]; });

var legendScale = d3.scaleLinear()
 .domain([0, d3.max(csv, function(e) { return +e.densitehabkm2; })])
 .range([0, colors.length * 20]);

var legendAxis = svg.append("g")
 .attr('transform', 'translate(750, 150)')
 .call(d3.axisRight(legendScale).ticks(3));


csv.forEach(function(e,i) {
 d3.select(("#d" +  e.insee)) // Line where I think the problem is
                              // Here I'm trying to select Id's using the same code but reading it in the csv file. I have check and id's in geojson and csv do correspond
   .style("fill", function(d) { return quantile(+e.densitehabkm2); })
   .on("mouseover", function(d) {
    div.transition()        
      .duration(200)      
      .style("opacity", .9);
    div.html("IZI")
      .style("left", (d3.event.pageX + 30) + "px")     
      .style("top", (d3.event.pageY - 30) + "px");
  })
  .on("mouseout", function(d) {
    div.style("opacity", 0);
    div.html("")
      .style("left", "-500px")
      .style("top", "-500px");
    });
  });

 //console.log(csv.insee);

});



// Append a DIV for the tooltip
 var div = d3.select("body").append("div")   
  .attr("class", "tooltip")               
  .style("opacity", 0);

</script>

geojson.features = geojson.features.filter(function(d) {
    return d.properties.year === 1962;
});