创建自定义d3生成器 [英] Create custom a d3 generator

问题描述

所以我可以创建一个区域生成器：

  d3.svg.area（）
  

...或行生成器：

  d3.svg.line（）
  

但是可以创建自己的生成器作为圆生成器？：

  d3.svg.circle（）
  pre> 
 
 
我只是希望能够使用这种清晰的语法：
  //不知道是否可以这样做
 svg.append（'path'）。datum（data）.attr（{
d：circleGenerator 
 }）
  
而不是使用奇怪的（至少对我） vg.selectAll（'circle'）。data（data）.enter（）。append（'circle'）。attr（）方法链：
  //正确但混乱的方式来做... 
 svg.selectAll（'circle'）。data（data）.enter .append（'circle'）。attr（{
 cx：function（d）{return dx}，
 cy：function（d）{return dy}，
r：3，
 transform：'translate（100,200）'
}）; 
  
我想将所有这些逻辑提取到一个生成器，通过 datum  
解决方案
这当然是可能的，这个生成器从头开始，即：
  function circleGen（）{
 //设置默认值
 var r = function（d）{return d.radius; }，
 x = function（d）{return d.x; }，
 y = function（d）{return d.y; }; 
 
 //返回函数生成循环路径
函数circle（d）{
 var cx = d3.functor（x）.call（this，d），
 cy = d3.functor（y）.call（this，d），
 myr = d3.functor（r）.call（this，d）; 
 
返回M+ cx +，+ cy ++ 
m+ -myr +，0+ 
a+ myr + + myr +，+ myr +0,0+ myr * 2 +，0+ 
a+ myr + ，0Z; 
} 
 
 // getter-setter方法
 circle.r = function（value）{
 if（！arguments.length）return r; r = value;回圈; 
}; 
 circle.x = function（value）{
 if（！arguments.length）return x; x = value;回圈; 
}; 
 circle.y = function（value）{
 if（！arguments.length）return y; y = value;回圈; 
}; 
 
 return circle; 
} 
  
然后，可以按照您的描述使用：
  var myC = circleGen（）
 .x（function（d）{return dx;}）
 .y d）{return dy;}）
 .r（function（d）{return dr;}）; 
 
 var data = [
 {x：150，y：100，r：10，fill：green}，
 {x：200，y：150，r ：5，fill：red}，
 {x：100，y：250，r：25，fill：blue} 
]; 
 
 svg.selectAll（path.circle）
 .data（data）
 .enter（）。append（path）
 .attr class，circle）
 .attr（d，myC）
 .style（fill，function（d）{return d.fill;}）; 
  
完整示例： http://bl.ocks.org/jsl6906/cb75852db532cee284ed  
 
So I can create an area generator:
d3.svg.area()
...or a line generator:
d3.svg.line()
But is it possible to create your own generator, such as a circle generator?:
d3.svg.circle()
I'd just like to be able to use this clear syntax:
// don't know if it's possible to do this...
svg.append('path').datum(data).attr({
  d: circleGenerator
})
Rather than create a circle in-place using the weird (at least to me) vg.selectAll('circle').data(data).enter().append('circle').attr() method chain:
// the correct but messy way to do it...
svg.selectAll('circle').data(data).enter().append('circle').attr({
  cx: function(d){ return d.x },
  cy: function(d){ return d.y },
  r: 3,
  transform: 'translate(100,200)'
});
I'd like to be able to extract all of this logic into a generator, and pass it information via datum
解决方案
This is certainly possible, you would need to create this generator from scratch, i.e.:
function circleGen() {
  //set defaults
  var r = function(d) { return d.radius; },
      x = function(d) { return d.x; },
      y = function(d) { return d.y; };

  //returned function to generate circle path
  function circle(d) {
    var cx = d3.functor(x).call(this, d),
        cy = d3.functor(y).call(this, d),
        myr = d3.functor(r).call(this, d);

    return "M" + cx + "," + cy + " " +
           "m" + -myr + ", 0 " +
           "a" + myr + "," + myr + " 0 1,0 " + myr*2  + ",0 " +
           "a" + myr + "," + myr + " 0 1,0 " + -myr*2 + ",0Z";
  }

  //getter-setter methods
  circle.r = function(value) {
    if (!arguments.length) return r; r = value; return circle;
  };  
  circle.x = function(value) {
    if (!arguments.length) return x; x = value; return circle;
  };  
  circle.y = function(value) {
    if (!arguments.length) return y; y = value; return circle;
  };

  return circle;
}
Then, it can be used as you describe:
var myC = circleGen()
   .x(function(d) { return d.x; })
   .y(function(d) { return d.y; })
   .r(function(d) { return d.r; });

var data = [
  {x: 150, y: 100, r: 10, fill: "green"},
  {x: 200, y: 150, r: 5, fill: "red"},
  {x: 100, y: 250, r: 25, fill: "blue"}
];

svg.selectAll("path.circle")
    .data(data)
  .enter().append("path")
    .attr("class", "circle")
    .attr("d", myC)
    .style("fill", function(d) { return d.fill; });
Full example: http://bl.ocks.org/jsl6906/cb75852db532cee284ed

                        
这篇关于创建自定义d3生成器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！