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'属性

回答

相关问题