1.1 select select

First, the core (Core)

1.1 Select

1.1.1 d3.select(selector)

Selecting a first selector element matches the specified string, if not return empty.

E.g:

<table>
            <tr>
                <td>苹果</td> 
                <td>香蕉</td>
                <td>西瓜</td>
            </tr>
            <tr>
                <td>桃子</td> 
                <td id="test">草莓</td>
                <td>菠萝</td>
            </tr>
        </table>

        <table>
            <tr>
                <td>可乐</td>
                <td>牛奶</td>
            </tr>
            <tr>
                <td>绿茶</td>
                <td class="test">啤酒</td>
            </tr>
        </table>

The following selector results:

d3.select('td')     //选择第一个td标签
d3.select('#test')  //选择第一个ID名为"test"的元素
d3.select(".test")  //选择第一个类名为"test"的元素

1.1.2 d3.select(node)

Select the specified node is used to select the current node used d3.select (this) in the event listener.

For example, the table above, select the element you want to set the font color changes to green when the stand-alone body, so you can

d3.select(document.body).on('click',function(){
    console.log(d3.select(this));
    d3.select(this).style("color","green");
})

1.1.3 d3.selectAll(selector)

Select all elements that match the specified string, the result is an array, the elements do not match, it returns null.

E.g:

    d3.select('tr').selectAll('td').style('color','white').style('background-color','orange')

1.1.4 d3.selectAll(nodes)

Select a specific set of nodes

E.g:

d3.selectAll(this.childNodes)   //在一个事件监听器中，选择当前元素的所有子元素
d3.selectAll(document.links)    //选择文档中所有的超链接

1.1.5 selection.attr(name[value])

Attribute set to the selected object, value may be a constant or a time function, a function of two parameters (data, index), (data, index) can set the parameters for each element in accordance with the function return value.

E.g:

//创建矩形
            rects=svg.selectAll("rect")
                    .data(dataset)
                    .enter()
                    .append("rect")
                    .attr({ //一次设置多个属性值
                        "x":(d,i)=>{ return 20+i*160/dataset.length;},  //使用函数设置属性值
                        "y":d=>20,
                        "width":20,
                        "height":100
                    })
                    .attr("fill","steelblue");  //矩形颜色

1.1.6 selection.classed(name[value])

For the selected element added or removed CSS class switching; value may be a function, a function of two parameters (data, index), index data is currently in the selection of the index, the function returns a bool value; when the value is true, binding css classes, class css removed when false.

For example: a rectangular odd index rects filled purple, red tomatoes filled with an even number.

<style type="text/css">
            .even{
                fill:purple;            
            }
            .odd{
                fill:tomato;
            }
            .stroke{
                stroke:deepskyblue;
                stroke-width:5;
            }
            .opacity{
                opacity:0.5;
            }
</style>

rects.classed({
    "odd":function(d,i){ return i%2==0?true:false;},
    "even":function(d,i){ return i%2==0?false:true;}
});

Then, these rectangles to bind click event. In the click of a mouse is to determine the rectangle bound css class to add the rectangle stroke class based on the result of this judgment, stroke or cancel classes.

rects.on('click',function(){
    let rect = d3.select(this);
    rect.classed('stroke opacity')?rect.classed('stroke opacity',false):rect.classed('stroke opacity',true);
})

1.1.7 selection.style(name[value[priority]])

Returns the value of the selection set the style name of the first named a non-empty element, or set pattern, a plurality of patterns may be provided at the same time, the function may be provided using different styles.

For example: to set a different style rectangular

rects.style({
    "stroke-width":5,
    "stroke":(d,i)=>{
        return `rgb(${10*d},${10*(25-d)},${d})`
    }
})

1.1.8 selection.property(name,[value])

Is a special built-in property settings html, as the value of the property sheet, the same as the check boxes checked property, previous usage.

For example: to set the default input value input box, check box to set the default value

d3.select('#text-id').property('value', 123456);
d3.select("#check-box").property('checked',true);

1.1.9 selection.text([value])

Returns the first non-empty elements of text, or text is provided for all elements.

1.1.10 selection.html([value])

Set inside the html content value, value may be a function, usage above, can also be empty, empty, returns the current html content.

For example: adding new content on the basis of the original

d3.select('body').html(function(d,i){
    let old = d3.select('this').html()
    return old+"<h1>HI</h1>";
})

1.1.11 selection.append(name)

Finally add the currently selected set of new elements in the returned collection contains the newly added element.

Example: Add a rectangle

let svg = d3.select('body').append('svg');
svg.append('rect')
    .attr({
    x:10,
    y:10,
    height:100,
    width:40,
    fill:'orange'
});

1.1.12 selection.insert(name[before])

Adding an element in front of before, if not before then, the same usage and append

For example: add a circle in front of the rect

svg.insert('rect');
svg.insert('circle','rect');
svg.insert('circle',(d,i)=>{"rect"})

1.1.13 selection.remove()

To delete the selected elements and returns.

For example: delete the above circle

let removed = svg.select('circle').remove();
console.log(removed);

1.1.14 selection.data(values[key])

​

1.1.15 selection.datum([value])

No binding value, the first non-empty data binding element is returned, the value will be selected to bind the elements of value to value.

E.g:

d3.selectAll("text").datum("aaaa").text(d=>d)   //将所有text修改为"aaaa"

Can also access data from HTML5 custom attributes, for example:

<div data-username="D3 user"></div>
<div data-username="D3 fans"></div>

    d3.selectAll("div")
        .datum(function() { return this.dataset; }) //获取HTML5自定义数据属性
        .text(function(d){ return d.username;});    //使用获取的数据设置文本的值

1.1.16 selection.sort(comparator)

Sort,

E.g:

svg.selectAll("text").sort((a,b)=>a.value-b.value)  //根据计算结果的正负来排序，为正的话，a在前。

1.1.17 selection.on(type[listener[capture]])

Binding or removing event listeners. type is the name of the event, listener is a function, there is d, i two parameters.

E.g:

d3.select("button").on("click",function(){
    d3.select("svg").selectAll("text").text(function(d,i){
        return "new :"+d*3;
    })
})

1.1.18 d3.event

Global object is a DOM event, to achieve the standard event fields, such as: time stamp, key codes.

For example: However, the mouse coordinates of a position offset with respect to the parent container.

var pos = "d3.event pos"+d3.event.offsetX + ',' + d3.event.offsetY;

1.1.19 selection.transition()

Excessive animation out on a selection set.

E.g:

d3.select('svg').append('circle').attr({
    cx:100, cy:100, r:40,
    fill:'orange'
});

d3.selct('svg').select('circle').transition().attr("fill","blue");

1.1.20 selection.call(function[argument])

Call the function specified, call the function this way, to facilitate chained calls.

Note that the first parameter of the function.

E.g:

function    fill(ele,fill){
    this.style("fill",fill);
}

rect.call(fill,"orange");
circle.call(fill,"tomato");

1.1.21 selection.empty()

The current selection is empty, then return true.

1.1.22 selection.node()

Returns the first non-null elements of the current selection. If empty, returns null.

1.1.23 selection.size()

Returns the total number of currently selected.

1.2 Transition