精通D3.js學習筆記（2）比例尺和坐標

1、線性比例尺

d3.scale.linear()   創建一個線性比例尺

          .domain([0,500]) 定義域

          .range([0,1000]) 值域

linear(x)  輸入定義域 返回 值域

linear.invert(y) 輸入值域，返回定義域

linear.domain([numbers]) 設定或獲取定義域

linear.range([values])設定或獲取值域

linear.rangeRound([valuses]) 四舍五入，結果是整數

linear.clamp([boolean])     false不收縮  true 收縮

linear.nice([count])  擴展成理想狀態

linear.ticks([ticks]) 默認是10 用於選取坐標刻度

linear.ticksFormat(count,[format]) 設置定義域內具有代表的值的表示形式，如小數

 

3、指數和對數比例尺

指數   exponent（）    對數base（）

 

var pow = d3.scle.pw().exponent(3);

 

pow.exponent（0.5）  //設置指數比例尺的指數為0.5機平方根

 

4、量子和分位比例尺

 

var quantize  = d3.scale.quantize()

                              .domain([0.10])

                              .range(["red","green]","blue","yellow","black");

定義域被分成5段，每一個段對應值域的一個值。[0,2]對應red，

<script>

  var quantize = d3.scale.quantize()

                    .domain([50,0])

                    .range(["#888","#666","#444","#222","#000"]);

  var r = [45,35,25,15,5];

  var svg = d3.select('body').append('svg')

              .attr('width',400)

              .attr('height',400);

      svg.selectAll("circle")

          .data(r)

          .enter()

          .append('circle')

          .attr("cx",function(d,i){return 50 + i * 30;})

          .attr("cy",50)

          .attr("r",function(d){return d;})

          .attr("fill",function(d){return quantize(d);})

</script>

 

5.閾值比例尺

是指一個效應能夠產生的最低值或最高值。類似量子

6、序數比例尺

定義域和值域都是離散的

d3.scale.orinal() 構建一個序數比例尺

ordinal(x) 返回y  

ordinal.domain([values]) 設定和獲取x

ordinal.range([values]) 設定或獲取y

ordinal.rangePoint(interval,[padding])  設置值域

ordinal.rangeRoundPoints(interval,[padding]) 和ranggePoint()一樣，但是會將結果取正

ordinal.rangeRoundBands(interval,[padding],[outerpadding]) 代替 range()設定值域

ordinal.rangeRoundRoundBands()  結果取整

ordinal.rangeBand() 返回使用rangeBands（） 設定后每一段的寬度

ordinal.rangeExtend()  返回一個數組，值域的最大值和最小值

7、顏色序數比例尺  

category10  10種顏色

category20()   20種顏色

category20b()  20種顏色

category20c()  20種顏色

var ordinal = d3.scale.ordinal()

                .domain([1,2,3,4,5])

                .rangePoints([0,100]);

 

console.log( ordinal.range() );

console.log( ordinal(1) );//0

console.log( ordinal(3) );//50

console.log( ordinal(5) );//100

 

ordinal.rangePoints([0,100],5);

console.log( ordinal.range() );//27.77777 38.88888 50 61.11111 72.22222

 

//padding 是5    step 是100/5+5-1   =11.11111   

 

ordinal.rangeRoundPoints([0,100],5);

console.log( ordinal.range() );//28 39 50 61 72  取正了

 

 

var bands = d3.scale.ordinal()

                .domain([1,2,3,4,5])

                .rangeBands([0,100]);

 

console.log( bands.range() );  //0.20.40.60.80

console.log( bands.rangeBand() );  //20//返回rangBand的值

 

bands.rangeBands([0,100],0.5,0.2);  //pading 為0.5 outerPadding

console.log( bands.range() );//4.08163 24.48979 44.89795 ....

console.log( bands.rangeBand() ); //10.20408

 

//左右邊界的空白是step*outerPadding 約等於4  step*padding 約是10 ，即rangBand之間的空白長度

 

 

var color = d3.scale.category10();

 

console.log( color(1) );

console.log( color("zhangsan") );

 

8、坐標軸

 

d3.svg.axis()  創建默認的新坐標系

axis（selection）將此坐標軸應用到指定的選擇集上，改選擇集需要包裹有<svg>或<g>

axis.scale([scale]) 設定或獲取坐標軸的比例尺

axis.orient([orientation])設定或獲取坐標軸的方向。

axis.ticks([argument...]) 設定或獲取坐標軸的分隔數。默認是10

axis.tickValues([values])設定或獲取坐標軸的指定刻度

axis.tickSize([inner,outer])設定或獲取坐標軸內外刻度的長度。默認是6

axis.innerTickSize([size])設定或獲取坐標軸的內刻度。

axis.outerTickSize([size])設定或獲取坐標軸的外刻度

axis.tickFormat([format])設定或獲取刻度的格式

           < style >

                 .axis path ,

                 .axis line {

                      fill : none ;

                      stroke : black;

                      shape-rendering : crispedges ;

                 }

                 .axis text {

                      font-family : sans-serif ;

                      font-size : 11 px ;

                 }

            </ style >

           < script type = "text/javascript" src = "js/d3.min.js" ></ script >

        

          

         </ script >   

     </ head >

     < body >

 

     </ body >

     < script >

            var width = 600 ;

            var height = 600 ;

            var svg = d3. select ( "body" ).append( "svg" )

                                                . attr ( "width" ,width)

                                                . attr ( 'height' ,height);

            var xScale = d3.scale.linear()

                                .domain([ 0 , 10 ])

                                . range ([ 0 , 300 ])

                                

                                

            var axis = d3.svg.axis()

                                .scale(xScale)

                                .orient( "bottom" );

           

            var gAxis = svg.append( "g" )

                                . attr ( "transform" , "translate(80,80)" );

           

            gAxis. attr ( "class" , "axis" );

           axis(gAxis);

      </ script >

 

<script>  

//圓心數據
var center = [[0.5,0.5],[0.7,0.8],[0.4,0.9],[0.11,0.32],[0.88,0.25],
               [0.75,0.12],[0.5,0.1],[0.2,0.3],[0.4,0.1],[0.6,0.7]];

var width  = 500;    //SVG繪制區域的寬度
var height = 500;    //SVG繪制區域的高度
    
var svg = d3.select("body")            //選擇<body>
            .append("svg")            //在<body>中添加<svg>
            .attr("width", width)    //設定<svg>的寬度屬性
            .attr("height", height);//設定<svg>的高度屬性
            
//x軸寬度
var xAxisWidth = 300;

//y軸寬度
var yAxisWidth = 300;
            
//x軸比例尺
var xScale = d3.scale.linear()
                .domain([0, 1.2 * d3.max(center,function(d){ return d[0]; })])
                .range([0,xAxisWidth]);

//y軸比例尺
var yScale = d3.scale.linear()
                .domain([0, 1.2 * d3.max(center,function(d){ return d[1]; })])
                .range([0,yAxisWidth]);            
    
//外邊框
var padding = { top: 30 , right: 30, bottom: 30, left: 30 };

//繪制圓
var cirlce = svg.selectAll("circle")
                .data(center)        //綁定數據
                .enter()            //獲取enter部分
                .append("circle")    //添加circle元素，使其與綁定數組的長度一致
                .attr("fill","black")        //設置顏色為black
                .attr("cx", function(d){        //設置圓心的x坐標
                    return padding.left + xScale(d[0]);
                })
                .attr("cy", function(d){        //設置圓心的y坐標
                    return height- padding.bottom - yScale(d[1]);
                })
                .attr("r", 5 );
                

var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .ticks(5);

yScale.range([yAxisWidth,0]);
                
var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left")
                .ticks(5);
                
svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom) +  ")")
        .call(xAxis);
            
svg.append("g")
        .attr("class","axis")
        .attr("transform","translate(" + padding.left + "," + (height - padding.bottom - yAxisWidth) +  ")")
        .call(yAxis); 
    
</script>