D3地圖，'d'屬性

（對不起，我的英語水平不好）嗨，我第一次使用D3與mithril js。地圖是可以的，但是我遇到了一些省份的顏色問題，它來自'd'屬性以獲得各省的id。屬性是不確定的，我不明白什麼是'd'。是祕銀的問題？有沒有其他的方式來獲得'd'屬性？D3地圖，'d'屬性

controller.map = function(el){ 
    var width = 1160; 
    var height = 960; 
    var scale = 10000; 
    var offset = [width/2, height/2]; 
    var center = [0, 50.64]; 
    var rotate = [-4.668, 0]; 
    var parallels = [51.74, 49.34]; 

    var projection = d3.geo.albers() 
     .center(center) 
     .rotate(rotate) 
     .parallels(parallels) 
     .scale(scale) 
     .translate(offset) 
    ; 
    var path = d3.geo.path() 
     .projection(projection) 
    ; 
    var svg = d3.select(el).append("svg") 
     .attr("width",width) 
     .attr("height",height) 
    ; 
    d3.json("belprov.json",function(error,be){ 
     if (error) return console.error(error); 

     var bounds = path.bounds(topojson.feature(be, be.objects.subunits)); 
     var hscale = scale*width/(bounds[1][0] - bounds[0][0]); 
     var vscale = scale*height/(bounds[1][1] - bounds[0][1]); 
     scale = (hscale < vscale) ? hscale : vscale; 
     offset = [width - (bounds[0][0] + bounds[1][0])/2, 
      height - (bounds[0][1] + bounds[1][1])/2]; 
     var centroid = d3.geo.centroid(topojson.feature(be, be.objects.subunits)); 
     center = [0, centroid[1]]; 
     rotate = [-centroid[0],0]; 
     projection = d3.geo.albers() 
      .center(center) 
      .rotate(rotate) 
      .parallels(parallels) 
      .scale(scale) 
      .translate(offset); 

     svg.selectAll(".province") 
      .data(topojson.feature(be, be.objects.provinces).features) 
      .enter().append("path") 
      .attr("class", function(d) { return "province " + d.id }) 
      .attr("d", path) 
     ; 
    }) 
};

來源

2016-03-09 Minuitdix

你可以做這樣的事情，以顏色不同勢路徑：

//make a color scale 
var color20 = d3.scale.category20(); 
//your code as you doing 


//on making paths do 
svg.selectAll(".province") 
      .data(topojson.feature(be, be.objects.provinces).features) 
      .enter().append("path") 
      .attr("class", function(d) { return "province " + d.id }) 
      .style("fill", function(d){return color(d.id);})//do this to color path based on id. 
      .attr("d", path)

來源

2016-03-09 14:02:46 Cyril

-1

在路徑對象的屬性"d"限定通過其路徑具有去的點的連續座標（它也給出了有關路徑是否應該貝塞爾曲線，直線等使用指示）。請參閱some documentation here。

注意：在d3中，d通常用作表示當前綁定到當前元素的數據的匿名函數的參數。所以這兩者是完全不同的東西。

在這裏，你的在線

.attr("d", path)

或許應該看起來更像

.attr("d", function(d){return d.path})

即取的數據元素中的字段path。

來源

2016-03-09 13:23:37 tarulen

感謝您的答覆，但'.attr（「d」，路徑）'運作良好，並顯示在地圖的問題來自於以前的行.attr（「class」，function（d）{return「province」+ d.id}）'。與你的更改問題是相同的「d」是未定義的，並且地圖不顯示 – Minuitdix

@Minuitdix好吧，對不起，我感到困惑，因爲「屬性」通常用於html元素的屬性。在這裏你想知道d3函數的'd' *參數*。 ''.attr（「class」，function（d）{...}）內的'console.log（d）''是一個很簡單的方法。不知道你的原始數據很難預測你會到達那裏。 – tarulen

好吧我認爲這個問題來自我的數據'd'參數中沒有id屬性 – Minuitdix

D3地圖，'d'屬性

回答

相關問題