d3.js API 说明

 

一、brush（画刷）

brush实现绘制内容的选择，详细信息参见d3.js中关于brush的API文档，此处主要说明以下几个比较重要的函数和方法；

d3.brush()

创建一个二维的brush.示例代码：

var circles = context.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")")

circles.selectAll(".circ")
            .data(data)
            .enter().append("circle")
            .attr("class", "circ")
            .attr("cx", function(d) {
                return (lessThanDay(padding.pad)) ? x(d.value) : x(getDate(d.value));
            })
            .attr("cy", function(d, i) {
                return (lessThanDay(padding.pad)) ? y(getDate(d.value)) : y(getTime(d.value));
            })
            .attr("r", 9)
            .on("click", function(d) {
                console.log(new Date(d.value));
            })

//==设置比例尺为时间比例尺，既输入数据为时间，输出数据为可通过图形展示的数值(横纵坐标刻度)===
var x = d3.time.scale().range([0 + margin.right, width - margin.left]),
    y = d3.time.scale().range([margin.top, height - margin.bottom - margin.top]);

//==================创建画刷，该画刷进行横向的图形数据选择==============================
//==============响应brush事件，重绘选择区域==========================
var brush = d3.svg.brush()
                .x(x)
                .on("brush", brushed);

 function brushed() {
                if (!brush.empty()) {
                    d3.select('.clear-brush').style("display", "inline-block");
                    d3.select('.brush-info')[0][0].innerText = brush.extent();
                }
            }
//================选择应用brush，表示画刷针对这些对象进行选择==============
circles.append("g")
                .attr("class", "brush")
                .call(brush)
                .selectAll("rect")
                .attr("y", -6)   //  设置brush的y为-6
                .attr("height", height - margin.bottom); //brush高度

brush.x

设置横纵标比例尺，若设置了横坐标比例尺，则横向范围可选择，同理可设置brush.y，若brush.x或brush.y任意设置为常数，则表示：在该坐标方向全向选择，比如上例中设置attr("y",-6)表示纵向选择范围为-6到y比例尺最大刻度，只能在横向范围进行选择；

brush.extent()

当设置数据时，表示设置画刷的选择范围，未设置参数时表示获取当前画刷的选择范围；数据设置参数应为二维数组，格式为brush.extent([[x0,y0],[x1,y1]])；其中x0,y0表示范围的最小坐标，x1，y1表示范围的最大坐标

brush.on

设置画刷事件，画刷支持三类事件：

• brushstart - on mousedown
• brush - on mousemove, if the brush extent has changed
• brushend - 

brush.empty()

判断画刷的选择范围是否为空

brush.clear()

清除画刷也选择内容

二、比例尺

比例尺实现将输入数据至图形坐标轴绘制数据的对应转换，d3.js提供的比例尺有：d3.scale.linear （线性比例尺）、d3.scale.sqrt （方根比例尺）、d3.scale.pow （平方比例尺）、d3.scale.log （对数比例尺）、d3.scale.quantize（数字转化比例尺）、d3.scale.threshold（门限比例尺）、d3.scale.ordinal （序数比例尺）（类似对数据进行计数，数据的在数组中的序号返回）、d3.time.scale（时间比例尺，按照时间范围返回对应的坐标值） 

d3.scale.linear （线性比例尺）:

实现数据与坐标数据之间的线性转换，常用属性与方法：

linear(x)：获取数据的比例尺数据；

linear.invert(y)：获取比例尺数据对应的数据；

 linear.domain([numbers])：设置比例尺的数据，该数据以数组的方式输入；

示例：将实现数据与颜色之间的一一对应转化；

var color = d3.scale.linear()
    .domain([-1, 0, 1])
    .range(["red", "white", "green"]);

linear.ticks([count])：设置刻度数量

linear.tickFormat(count, [format])：设置刻度显示格式

var x = d3.scale.linear().domain([-1, 1]);
console.log(x.ticks(5).map(x.tickFormat(5, "+%"))); // ["-100%", "-50%", "+0%", "+50%", "+100%"]

 

 d3.scale.ordinal（序数比例尺）

 ordinal(x)：获取domain数据x对应的序数；

ordinal.domain([values])：设置比例尺源数据；

ordinal.rangePoints([values])：返回序数可以是浮点数；

ordinal.rangeRoundPoints([values])：返回整型序数；

var o = d3.scale.ordinal()
    .domain([1, 2, 3, 4])
    .rangeRoundPoints([0, 100]);

o.range(); // [1, 34, 67, 100]

其它比例尺的使用，参照API